Здравствуйте. Есть задача:
Страница высотой в несколько экранов. Где-то в середине нужно сделать слайдшоу таким образом, чтобы когда посетитель доскроллил до этого элемента, вертикальный скроллинг прекращался и при попытке скроллинга листались слайды. Когда слайды заканчиваются, вертикальный скроллинг снова включается.
Начал писать сам, но столкнулся с проблемой: не знаю как остановить скроллинг, но при этом продолжать реагировать на попытки пользователя это сделать (чтобы по событию скролл листать слайды).
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$( function() {
var scrt;
scrt=$(window).scrollTop();
$(window).scroll(function(){
$(window).scroll(100);
if ($(window).scrollTop()-$('#slides').offset().top>-300){
if (scrt<$(window).scrollTop()){
$('#slides').css({ left: '-=10px' });
} else {
$('#slides').css({ left: '+=10px' });
};
scrt=$(window).scrollTop();
}else{
};
});
});
</script>
</head>
<body>
<div style="" id="big">
<div style="height: 500px;"></div>
<div id="slides" style="width: 3396px;
position: relative;">
<img src="/img/1.png">
<img src="/img/2.png">
<img src="/img/3.png">
<img src="/img/4.png">
<img src="/img/5.png">
</div>
<div style="height: 1500px;"></div>
</div>
</body>
</html>
Подскажите, как можно решить проблему или готовый плагин, который делает подобное слайдшоу?
Простой