Попытка добиться цикличной анимации в слайдере
Всем доброго времени суток. Верстаю свой первый слайдер, а точней пытаюсь воспроизвести bxslider.
Оригинал слайдера тут http://solopine.com/rosemary/#. Мои наработки тут http://l1m0n.com.ua/. Вопрос: как автор слайдера добился эфекта перехода в начало без прокрутки обратно?! А вот отрывок метода, который запускает анимацию(пока только 1 итерация):
run: function(speed) {
var self = this;
var start = setInterval(function(){
//self.wrapper.style.left = "-" + self.slideWidth * self.counter + "px";
self.wrapper.style.transform = "translate3d(-" + self.slideWidth * self.counter + "px, 0px, 0px)";
self.counter++;
if (self.counter == self.total ){
self.wrapper.style.transitionDelay = "0s";
}
else if (self.counter == self.total +1){
clearInterval(start);
self.counter = 1;
self.wrapper.style.transform = "translate3d(-" + self.slideWidth * self.counter + "px, 0px, 0px)";
}
}, speed);
}
|
Не совсем понял. Можно немного разжевать?)
|
L1m0n,
4 слайда изначально -- 1,2,3,4 bxslider делает 4клон,1,2,3,4, 1клон идет прыжок с клона на настоящий слайд или на оборот -- перед показом |
Ну да, я так и сделал:
1 слайд, 2 слайд, 3 слайд , слайд клон с 1 слайдом и здесь с 0 транзишн делаю переход обратно на 1 слайд и получается прокрутка всех слайдов на начало. Как добиться перехода на начало, как в bxслайдере, что бы не было видно что слайдер отъехал назад :-? |
Цитата:
|
Пардон за мою тупость! :write: Вместо transitionDuration использовал transitionInterval!
Большое спасибо Рони) все работает как задумано) |
Бесконечная простейшая карусель на jQuery макет
L1m0n,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
li{
margin: 0px;
width: 100px; height:50px; float: left;
display: block;
}
#carusel {
position:relative; top: 0px; left:-100px; display:block;
width: 600px; height:50px;
padding: 0px; margin: 0px;
}
div{
overflow:hidden; width: 100px; height:50px; position: relative; left: 100px
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function () {
var n = 0;
function go() {
$('#carusel').delay(3000).animate({
left: '-=100'
}, 300, function () {
n = ++n % 4;
!n && $('#carusel').css({
left: '-100px'
});
go()
})
}
go()
})
</script>
</head>
<body>
<div>
<ul id="carusel">
<li id = "4c" style="background-color:DeepPink;">4</li><!--//клон-->
<li id = "1" style="background-color:red;">1</li>
<li id = "2" style="background-color:green;">2</li>
<li id = "3" style="background-color:Yellow;">3</li>
<li id = "4" style="background-color:DeepPink;">4</li>
<li id = "1c" style="background-color:red;">1</li> <!--//клон-->
</ul>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 12:35. |