循环Jquery滑块

时间:2017-03-21 12:54:29

标签: jquery slider

我从5个元素创建了一个滑块,但无法理解如何循环此滑块。当我单击向左勾选时,我需要滑块从右向左继续移动,当我单击向右勾选时,即使最后一张幻灯片已经显示,我也需要。

Jsfiddle与要测试的代码 - Jsfiddle

我的HTML:

webSocketServerWrapper.start(PORT);

这是我的JS

<div class="slider">
  <div class="slider__viewport">

    <button class="slider__btn slider__btn--left" type="button" name="button"
          @click="previousSlide">
    </button>

    <ul class="slider__slides" data-current="0">
      <li class="slider__slide slider__slide--hiddenLeft">
        <img class="slider__img" src="../../img/slide1.png" alt="1">
        <h3 class="slider__title">
        Левый слайд
        </h3>
       <span class="slider__date">21 февраля 2017</span>
      </li>

      <li class="slider__slide slider__slide--left">
        <img class="slider__img" src="../../img/slide2.png" alt="1">
        <h3 class="slider__title">
        Левый слайд
        </h3>
        <span class="slider__date">25 февраля 2017</span>
      </li>

      <li class="slider__slide slider__slide--current">
        <img class="slider__img" src="../../img/slide3.png" alt="2">
        <h3 class="slider__title">
        Текущий слайд
        </h3>
       <span class="slider__date">27 февраля 2017</span>
      </li>

      <li class="slider__slide slider__slide--right">
        <img class="slider__img" src="../../img/slide4.png" alt="3">
        <h3 class="slider__title">
        Правый слайд
        </h3>
       <span class="slider__date">28 февраля 2017</span>
      </li>

      <li class="slider__slide slider__slide--hidden">
        <img class="slider__img" src="../../img/slide5.png" alt="4">
        <h3 class="slider__title">
        Скрытый слайд
        </h3>
        <span class="slider__date">29 февраля 2017</span>
      </li>
    </ul>

    <button class="slider__btn slider__btn--right" type="button" name="button"
          @click="nextSlide">
    </button>
  </div>
</div>

1 个答案:

答案 0 :(得分:0)

检查当前滑动值是否超出界限的条件总是返回true,导致滑动不变。

另外,请使用分号。请。 :P

请注意,我更改了页面和图像来源的格式;这是出于调试目的,如果需要,您可以将其更改回来。我还必须将滑动更改为出现/消失以进行测试(Stack Overflow提供的测试环境的结果窗口太小,无法在测试时查看结果)。

&#13;
&#13;
var currentSlide=1;
$('.slider__slides').children().eq(currentSlide-1).siblings().hide();

$('.slider__btn--left').click(function() {  
    var slideWidth = 620;
    var currentSlide = parseInt($('.slider__slides').data('current'));
    currentSlide++;
    var size = $('.slider__slides').children().length;
    if (currentSlide > size) {
      currentSlide = 1;
   }
  console.clear();
  console.log(currentSlide);
  $('.slider__slides').children().eq(currentSlide-1).show();
  $('.slider__slides').children().eq(currentSlide-1).siblings().hide();
  $('.slider__slides').data('current', currentSlide);
 });

$('.slider__btn--right').click(function() {  
  var slideWidth = 620;
  var currentSlide = parseInt($('.slider__slides').data('current'));
  currentSlide--;
  var size = $('.slider__slides').children().length;
  if (currentSlide <= 0) {
    currentSlide = size;
  }
  console.clear();
  console.log(currentSlide);
  $('.slider__slides').children().eq(currentSlide-1).show();
  $('.slider__slides').children().eq(currentSlide-1).siblings().hide();
  $('.slider__slides').data('current', currentSlide);
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="slider">
  <div class="slider__viewport">

    <button class="slider__btn slider__btn--left" type="button" name="button">Left
    </button>
    
    <button class="slider__btn slider__btn--right" type="button" name="button">Right
    </button>
    
    <ul class="slider__slides" data-current="0">
      <li class="slider__slide slider__slide--hiddenLeft">
        <img class="slider__img" src="http://images.huffingtonpost.com/2012-08-18-GorillaSilverback6.jpg" alt="1" width="100" height="100">
        <h3 class="slider__title">
        Левый слайд
        </h3>
       <span class="slider__date">21 февраля 2017</span>
      </li>

      <li class="slider__slide slider__slide--left">
        <img class="slider__img" src="https://www.w3schools.com/css/trolltunga.jpg" alt="2" width="100" height="100">
        <h3 class="slider__title">
        Левый слайд
        </h3>
        <span class="slider__date">25 февраля 2017</span>
      </li>

      <li class="slider__slide slider__slide--current">
        <img class="slider__img" src="http://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg" alt="3" width="100" height="100">
        <h3 class="slider__title">
        Текущий слайд
        </h3>
       <span class="slider__date">27 февраля 2017</span>
      </li>

      <li class="slider__slide slider__slide--right">
        <img class="slider__img" src="http://www.planwallpaper.com/static/images/image-slider-2.jpg" alt="4" width="100" height="100">
        <h3 class="slider__title">
        Правый слайд
        </h3>
       <span class="slider__date">28 февраля 2017</span>
      </li>

      <li class="slider__slide slider__slide--hidden">
        <img class="slider__img" src="http://www.planwallpaper.com/static/images/wallpaper-sunset-images-back-217159.jpg" alt="5" width="100" height="100">
        <h3 class="slider__title">
        Скрытый слайд
        </h3>
        <span class="slider__date">29 февраля 2017</span>
      </li>
    </ul>

  </div>
</div>
&#13;
&#13;
&#13;