Всем доброго времени суток!
Подскажите пожалуйста кто нибудь,как можно зациклить этот слайдер?
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)})
}
});
});