Я очень новичок в 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>
Любая помощь будет отличной!