Слайдер с вертикальной прокруткой
Добрый день!
Такая задача. Есть обычный слайдер, блоки горизонтально сменяют друг друга , отображается один элемент слайдера. Сам сдайдер к примеру высотой 200px, а высота одного слайда 400px. Задача такая, нужно чтобы каждый слайд сначала прокрутился вертикально( отобразив нижнюю часть картинки) и только потом сменился другим( пользователь не скролит, не нажимает, только наблюдает:). прошу только натолкнуть ,как/чем бы это реализовать или где почитать посмотреть кто видел подобное, или подсказать как правильно загуглить ) всем добра! |
Нужно искать слайдер с колбэком, когда слайд попадает в поле видимости, например добавляется класс active. Если нет такого колбэка, то самому докостылять функционал, после того как слайдер завелся (такой колбэк вероятней всего будет). Т.е регистрируем счетчик с таким же таймаутом, как у слайдера и своей функцией для анимации слайда по вертикали.
Думаю, я бы так сделал. |
Спасибо большое, попробую так!
|
r1sus,
http://javascript.ru/forum/dom-windo...tml#post430305 достаточно добавить 1 строку для анимации блока вверх |
Попробую и этот вариант, спасибо
|
бесконечный слайдер на jquery + вертикальная прокрута блока, макет
r1sus,
дополненный вариант по ссылке выше ...
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{
background-color: #FFE23D;
}
li{ position: relative;
margin: 0px;
width: 300px; height:400px; float: left;
text-align: center;
display: block;
}
#carusel {
position: absolute; top: 0px; left:0px; display:block;
height:50px;
padding: 0px; margin: 0px;
}
div.item{
overflow:hidden; width: 300px; height:200px; position: relative; margin: 100px auto;
}
li > div{margin: 0px;
box-sizing: border-box;
height: 50%;
width: 100%;
border: 5px #8A2BE2 solid;
line-height: 180px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function () {
$(function() {
var ul = $('#carusel'), widthAll = 0;
$('li', ul).each(function(indx, element){
widthAll += this.offsetWidth
});
ul.width(widthAll);
function go() {
var li = $('li:first', ul), w = li.width();
li.delay(1800).animate({top : -200},1200);
ul.delay(4600).animate({
left: -w
}, 2000, function () {
li.appendTo(this).css({top : 0})
$(this).css({
left: '0px'
});
go()
})
}
go()
});
})
</script>
</head>
<body>
<div class="item">
<ul id="carusel">
<li id = "1" style="background-color:red;"><div>start</div><div>end</div></li>
<li id = "2" style="background-color:green;"><div>start</div><div>end</div></li>
<li id = "3" style="background-color:Yellow;"><div>start</div><div>end</div></li>
<li id = "4" style="background-color:DeepPink;"><div>start</div><div>end</div></li>
<li id = "5" style="background-color:MediumBlue;"><div>start</div><div>end</div></li>
</ul>
</div>
</body>
</html>
|
рони,
спасибо, то что нужно |
| Часовой пояс GMT +3, время: 11:33. |