Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Помогите зациклить слайдер (https://javascript.ru/forum/events/64947-pomogite-zaciklit-slajjder.html)

Nostromo 15.09.2016 15:08

Помогите зациклить слайдер
 
Всем доброго времени суток!
Подскажите пожалуйста кто нибудь,как можно зациклить этот слайдер?
HTML
<div class="wrapper">
		<div class="slide_wrap">
			<ul class="Slider">
				<li style="background-color: #F37D00"><span>1</span></li>
				<li style="background-color: #FBBA14"><span>2</span></li>
				<li style="background-color: #93D543"><span>3</span></li>
				<li style="background-color: #DB5347"><span>4</span></li>
			</ul>
		</div>
	</div>

CSS
Код:

.slide_wrap {
        width: 600px;
        height: 200px;
        background-color: #98DDF7;
        margin: 0 auto;
        position: relative;
        top: 200px;
        overflow: hidden;
}
.Slider {
        list-style: none;
        margin: 0px;
        padding: 0px;
        cursor: pointer;
}
.Slider li {
        float: left;
        width: 600px;
        height: 200px;
}
.Slider span {
        font-size: 70px;
        text-align: center;
        padding-left: 290px;
        float: left;
        padding-top: 65px;
        font-weight: bold;
       
}

Jquery
Number.prototype.roundTo = function(nTo) {
    nTo = nTo || 10;	
    return Math.round(this * (1 / nTo) ) * nTo;
}
$(function() {
    var slides = $('.Slider').children().length;
    var slideWidth = $('.slide_wrap').width();
    var min = 0;
    var max = -((slides - 1) * slideWidth);
    $(".Slider").width(slides*slideWidth).draggable({
        axis: 'x',
        drag: function (event, ui) {
            if (ui.position.left > min) ui.position.left = min;
            if (ui.position.left < max) ui.position.left = max;
        },
        stop: function( event, ui ) {
            $(this).animate({'left': (ui.position.left).roundTo(slideWidth)})
        }
    });
});


Часовой пояс GMT +3, время: 10:26.