Сегодня мы хотим поделиться скриптом благодаря которому можно реализовать перелистывание набора изображений, с помощью специального жеста.
Три изображения видны по умолчанию: одно сверху, два остальных под ним. Их мы расположили в оси Z. Если же, перетащить верхнее изображение, то оно пропадёт, верхним станет предыдущее и так далее...
HTML самой галерейки будет следующая:
Код
<ul id="elasticstack" class="elasticstack">
<li><img src="img/1.jpg" alt="01"/><h5>Saudade</h5></li>
<li><img src="img/2.jpg" alt="02"/><h5>Tuqburni</h5></li>
<li><img src="img/3.jpg" alt="03"/><h5>Retrouvailles</h5></li>
<li><img src="img/4.jpg" alt="04"/><h5>Onsra</h5></li>
<li><img src="img/5.jpg" alt="05"/><h5>Mamihlapinatapai</h5></li>
<li><img src="img/6.jpg" alt="06"/><h5>Koi No Yokan</h5></li>
</ul>
При перетаскивании изображений, мы применяем эффект “отскакивания”. Дистанция может быть выставлена в параметре distDragBack. Область, выйдя за которую, изображение пропадёт, выставляется в параметре distDragMax. На следующем графике отображены дистанции:
Код
new ElastiStack( element, {
// distDragBack: если пользователь не зашёл за пределы, возвращаем изображение на место
distDragBack : 200,
// distDragMax: если выходит за эти пределы, убираем изображение
distDragMax : 450,
// колбэк
onUpdateStack : function( current ) { return false; }
} );
