Question

我遇到滑块的问题我已经放在一起（导航到每张幻灯片）。问题是.active-slide类未正确添加到下一张幻灯片中。我已经在CodePen中使用了这个 - http://codepen.io/davelivesey/pen/mEBkAa - 但是一旦我将它移植到我的项目中它就会中断，主要问题是.active-slide类不再添加到下一张幻灯片中。

我在它周围添加了$(document).ready( ...，但这并没有解决它。与我编写的任何其他代码没有冲突，CodePen和项目都使用相同版本的jQuery（2.2.4）。

这是代码在项目中不起作用的代码。为了简洁起见，我删除了一些CSS！

HTML

<div id="slider">
  <div class="slide">I'm slide one.</div>
  <div class="slide">I'm slide two.</div>
  <div class="slide">I'm slide three.</div>
</div>

CSS（SASS）

#slider {
  width: 100%;
  height: 600px;
  position: relative;
  background-color: rgb(240,240,240);

  .slide {
    width: 100%;
    height: 600px;
    position: absolute;
    top: 0;
    display: none;
  }
}

.slide.active-slide {
  display: block;
}

#slider-nav ul {
  list-style: none;
  text-align: center;

    li {
      display: inline-block;
      margin-right: 5px;

      a span {
        display: inline-block;
        width: 10px; height: 10px;
        border-radius: 10px;
        border: 1px solid rgb(130,130,130);
    }
  }

  li.active a span {
    background-color: rgb(180,180,180);
  }
}

jQuery的：

$(document).ready( function() {

    var $slides  = $('#slider .slide'),
        $navWrap = $('#slider-nav ul');

    function nextSlide() {
        var $next = $('#slider-nav ul li.active').next();
        if ($next.length === 0){
            $next = $('#slider-nav ul li:first-of-type');
        }
        $next.click();
    }
    function slideTransition(index) {

        $('#slider .slide.active-slide').delay(6000).fadeOut(500, function() {
            $(this).removeClass('active-slide');
        });

        $('#slider .slide:eq(' + index + ')').fadeIn(500, function() {
            $(this).addClass('active-slide');
        });
    }

    $slides.each( function(index) {
        $navWrap.append('<li><a href="#link'+index+'"><span></span></a></li>');
    });

    var timer = setInterval(nextSlide, 6000);
    $('#slider .slide:first').addClass('active-slide').fadeIn(200);
    $('#slider-nav ul li').click(function() {
        clearInterval(timer);
        $(this).siblings('.active').removeClass('active');
        $(this).addClass('active');
        var index = $(this).index('li');
        slideTransition(index);
        timer = setInterval(nextSlide, 6000);
        return false;
    });

    $('#slider-nav ul li:first-of-type').click();

});

jQuery滑块没有添加活动幻灯片类

0 个答案: