Question

滑块幻灯片没有重复。

我试图这样做。滑块工作正常，但是当最后一张幻灯片结束时，没有重复。

这是我的代码在一个片段中（片段的窗口可能太少了，所以看看这里：https://codepen.io/km_likhon/pen/eEroNK）：

＆＃13;

var Slider = (function() {
    var initSlider = function() {
        var dir = $("html").attr("dir");
        var swipeHandler = new Hammer(document.getElementById("slider"));
        swipeHandler.on('swipeleft', function(e) {
            if (dir == "rtl")
                $(".arrow-left").trigger("click");
            else
                $(".arrow-right").trigger("click");
        });

        swipeHandler.on('swiperight', function(e) {
            if (dir == "rtl")
                $(".arrow-right").trigger("click");
            else
                $(".arrow-left").trigger("click");
        });

        $(".arrow-right , .arrow-left").click(function(event) {
            var nextActiveSlide = $(".slide.active").next();

            if ($(this).hasClass("arrow-left"))
                nextActiveSlide = $(".slide.active").prev();

            if (nextActiveSlide.length > 0) {
                var nextActiveIndex = nextActiveSlide.index();
                $(".dots span").removeClass("active");
                $($(".dots").children()[nextActiveIndex]).addClass("active");

                updateSlides(nextActiveSlide);
            }
        });

        $(".dots span").click(function(event) {
            var slideIndex = $(this).index();
            var nextActiveSlide = $($(".slider").children()[slideIndex]);
            $(".dots span").removeClass("active");
            $(this).addClass("active");

            updateSlides(nextActiveSlide);
        });

        var updateSlides = function(nextActiveSlide) {
            var nextActiveSlideIndex = $(nextActiveSlide).index();

            $(".slide").removeClass("prev-1");
            $(".slide").removeClass("next-1");
            $(".slide").removeClass("active");
            $(".slide").removeClass("prev-2");
            $(".slide").removeClass("next-2");

            nextActiveSlide.addClass("active");

            nextActiveSlide.prev().addClass("prev-1");
            nextActiveSlide.prev().prev().addClass("prev-2");
            nextActiveSlide.addClass("active");
            nextActiveSlide.next().addClass("next-1");
            nextActiveSlide.next().next().addClass("next-2");
        }

        var updateToNextSlide = function(nextActiveSlide)
        {
            
        }
    }
    return {
        init: function() {
            initSlider();
        }
    }
})();

$(function() {
    Slider.init();
});

＆＃13;

.slider-container {
  display: block;
  height: 270px;
  width: auto;
  margin: 0 auto;
  position: relative;
  max-width: 1300px;
  margin-top: 20px;
}
.slider-container .arrow-left {
  position: absolute;
  left: 10%;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  color: white;
  font-size: 28px;
  cursor: pointer;
  z-index: 9;
  border-top: 15px solid transparent;
  border-right: 30px solid #C85054;
  border-bottom: 15px solid transparent;
}
@media (max-width: 768px) {
  .slider-container .arrow-left {
    display: none;
  }
}
.slider-container .arrow-right {
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  color: white;
  font-size: 28px;
  cursor: pointer;
  z-index: 9;
  border-top: 15px solid transparent;
  border-left: 30px solid #C85054;
  border-bottom: 15px solid transparent;
}
@media (max-width: 768px) {
  .slider-container .arrow-right {
    display: none;
  }
}
.slider-container .dots {
  display: inline-block;
  width: 100%;
  text-align: center;
  margin: 30px 0;
  user-select: none;
}
.slider-container .dots span {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 2px;
  cursor: pointer;
  user-select: none;
  padding: 10px 0;
  position: relative;
}
.slider-container .dots span:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: #ccc;
  opacity: 0.6;
}
@media (max-width: 768px) {
  .slider-container .dots span {
    width: 23px;
    margin-bottom: 15px;
  }
}
.slider-container .dots span.active:before {
  background-color: #C85054;
  opacity: 1;
}
.slider-container .slider {
  display: block;
  width: 650px;
  height: 100%;
  margin: 0 auto;
  position: relative;
  text-align: center;
  line-height: 270px;
  color: white;
}
@media (max-width: 768px) {
  .slider-container .slider {
    height: 450px;
  }
}
.slider-container .slider .slide {
  display: inline-block;
  width: 80%;
  height: 270px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0) scale3d(0.4, 0.4, 1);
  transition: transform 0.3s ease-in-out 0s, z-index .2s ease-in-out .1s;
  background-color: #2C2A40;
}
.slider-container .slider .slide:nth-child(odd) {
  background-color: gray;
}
@media (max-width: 768px) {
  .slider-container .slider .slide {
    width: 100%;
    height: 450px;
  }
}
.slider-container .slider .slide:nth-child(1) {
  background-color: #505E63;
}
.slider-container .slider .slide:nth-child(2) {
  background-color: #62698C;
}
.slider-container .slider .slide:nth-child(3) {
  background-color: #2C2A40;
}
.slider-container .slider .slide:nth-child(4) {
  background-color: #C85054;
}
.slider-container .slider .slide:nth-child(5) {
  background-color: #F1BB70;
}
.slider-container .slider .slide.prev-2 {
  transform: translate3d(-105%, -50%, 0) scale3d(0.4, 0.4, 1);
  z-index: 1;
  opacity: 0.5;
}
.slider-container .slider .slide.prev-1 {
  transform: translate3d(-85%, -50%, 0) scale3d(0.6, 0.6, 1);
  z-index: 2;
}
.slider-container .slider .slide.next-1 {
  z-index: 2;
  transform: translate3d(-15%, -50%, 0) scale3d(0.6, 0.6, 1);
}
.slider-container .slider .slide.next-2 {
  z-index: 1;
  transform: translate3d(5%, -50%, 0) scale3d(0.4, 0.4, 1);
  opacity: 0.5;
}
.slider-container .slider .slide.active {
  z-index: 3;
  transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1);
  box-shadow: 0px 5px 15px 3px rgba(0, 0, 0, 0.3);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>

<div class="slider-container">
  <span class="arrow-left"></span>
  <span class="arrow-right"></span>
  <div class="slider" id="slider">
    <div class="slide prev-2">
      1
    </div>
    <div class="slide prev-1">
      2
    </div>
    <div class="slide active">
      3
    </div>
    <div class="slide next-1">
      4
    </div>
    <div class="slide next-2">
      5
    </div>
    <div class="slide">
      6
    </div>
    <div class="slide">
      7
    </div>
    <div class="slide">
      8
    </div>
  </div>
  <div class="dots">
    <span></span>
    <span></span>
    <span class="active"></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>
</div>

＆＃13;

请帮我解决这个问题。谢谢。

滑块幻灯片不重复

0 个答案: