Слайдер изображений, который повторяется бесконечно без возврата - PullRequest
Новая
       13

Слайдер изображений, который повторяется бесконечно без возврата

0 голосов
/ 28 мая 2019

В настоящее время мы используем слайдер изображений для рекламы на главной странице.Однако у нас возникают проблемы с вращением изображений внутри слайдера.Теперь ползунок перемещается справа налево, но после загрузки последнего изображения первое изображение возвращается не справа, а слева, а затем возвращается назад.Что нужно изменить, чтобы внедрить ползунок так, как если бы он все еще был подключен справа?

Я использовал приведенный ниже код. jquery слайд div внутри div

[html] 

<div class="ads">
 <div class="movable">
  <div id="ss1">
   <a href="..." target="_blank"><img src="..."></a>
  </div>
  <div id="ss2">
   <a href="..." target="_blank"><img src="..."></a>
  </div>
  <div id="ss3">
   <a href="..." target="_blank"><img src="..."></a>
  </div>
 </div>
</div>

[jquery] 

$(function() {
$('.ads').each(function() {
    var $gal = $(this),
        $movable = $(".movable", $gal),
        $slides = $(">*", $movable),
        N = $slides.length,
        C = 0,
        itv = null;
    function play() { itv = setInterval(anim, 2000); }
    function stop() { clearInterval(itv); }
    function anim() {
        C = ($(this).is(".prev") ? --C : ++C) < 0 ? N - 1 : C % N;
        $movable.css({ transform: "translateX(-" + (C * 100) + "%)" });
    }
    $(".prev, .next", this).on("click", anim);
    // $gal.hover(stop, play);
    play();
  });
});

[css] 

.ads {
 top: auto;
 right: 2%;
 bottom: 3%;
 position: absolute;
 width: 25vw;
 height: 25vw;
 max-width: 400px;
 max-height: 400px;
 z-index: 11;
}

.ads .slide_img {
 position: absolute;
 width: 100%;
 height: 100%;
}

.slide_img img {
 width: 25vw;
 height: 25vw;
 max-width: 500px;
 max-height: 500px;
}

.ads #nav_slide {
 width: 100%;
 bottom: 12%;
 height: 11px;
 position: absolute;
 text-align: center;
 z-index: 98;
 cursor: default;
}

.slide_img {
 z-index: -1;
}

.xbtn {
 position: relative;
 right: 2%;
 bottom: 99%;
 text-align: right;
 color: rgba(255, 255, 255, 0.2);
}

.xbtn p {
 position: relative;
 line-height: 20px;
}

button:focus {
 outline: none;
}
...