Как сделать бесконечный цикл без белого пробела для слайдера контента? - PullRequest
0 голосов
/ 22 января 2019

Я очень новичок в Jquery и пытаюсь понять, как сделать цикл слайдера контента без каких-либо пробелов - как непрерывный цикл.

Я пытаюсь создать слайдер логотипа клиента, егоскользит туда, куда я хочу, но в последний раз он, кажется, скользит, пока полностью не исчезнет, ​​прежде чем появится или сбросится первый логотип.Как мне сделать так, чтобы оно продолжалось без разрыва?

'use strict';

$(function() {

    //settings for slider
    var width = 250;
    var animationSpeed = 1000;
    var pause = 3000;
    var currentSlide = 1;

    //cache DOM elements
    var $slider = $('#slider');
    var $slideContainer = $('.slides', $slider);
    var $slides = $('.slide', $slider);

    var interval;

    function startSlider() {
        interval = setInterval(function() {
            $slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function() {
                if (++currentSlide === $slides.length) {
                    currentSlide = 1;
                    $slideContainer.css('margin-left', 0);
                }
            });
        }, pause);
    }
    function pauseSlider() {
        clearInterval(interval);
    }

    $slideContainer
        .on('mouseenter', pauseSlider)
        .on('mouseleave', startSlider);

    startSlider();
});
/* JQUERY Slider */
#slider {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.slides {
    display: block;
    width: 250px;
    margin: 0;
    padding: 0;
}
#slider .slides {
    width: 3250px;
    margin: 0;
    padding: 0;
}

#slider .slide {
    float: left;
    list-style-type: none;
    height: 75px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="slider">
  <ul class="slides">
    <li class="slide">slide1</li>
    <li class="slide">slide2</li>
    <li class="slide">slide3</li>
    <li class="slide">slide4</li>
    <li class="slide">slide5</li>
    <li class="slide ">slide1</li>
  </ul>
</div>

Любая помощь будет отличной!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...