Имеется карусель с перелистыванием через зажатую кнопку мыши или пальцем на тачскрине.
Понадобилось расширить её, а именно сделать возможность перелистывания по кликам на соответствующие блоки (div.right и div.left). Но тут и появилась проблема - клик перелистывает не на один шаг, а сразу до конца (то есть: мы находимся на 1 странице, всего их 5, клик на блок вызывает перелистывание на 5 страницу а не на вторую).
(зависимости jquery.event.move.js, jquery.event.swipe.js)
| Код |
var wrap = $("div.wrap"),
slides = wrap.find(".img_slide"),
active = slides.filter(".active"),
i = slides.index(active),
width = wrap.width();
slides.on("swipeleft", function(e)
{
if(i === slides.length - 1) { return; }
slides.eq(i + 1).trigger("activate");
}).on("swiperight", function(e)
{
if (i === 0) { return; }
slides.eq(i - 1).trigger("activate");
}).on("activate", function(e)
{
slides.eq(i).removeClass("active");
jQuery(e.target).addClass("active");
i = slides.index(e.target);
}).on("movestart", function(e)
{
if( (e.distX > e.distY && e.distX < -e.distY ) || (e.distX < e.distY && e.distX > -e.distY) )
{
e.preventDefault();
return;
}
wrap.addClass("notransition");
}).on("move", function(e)
{
var left = 100 * e.distX / width;
if(e.distX < 0)
{
if (slides[i+1]) {
slides[i].style.left = left + "%";
slides[i+1].style.left = (left+100)+"%";
}
else {slides[i].style.left = left/4 + "%";}
}
if (e.distX > 0)
{
if (slides[i-1]) {
slides[i].style.left = left + "%";
slides[i-1].style.left = (left-100)+"%";
}
else {slides[i].style.left = left/5 + "%";}
}
}).on("moveend", function(e)
{
wrap.removeClass("notransition");
slides[i].style.left = "";
if( slides[i+1] )
{
slides[i+1].style.left = "";
}
if( slides[i-1] )
{
slides[i-1].style.left = "";
}
});
// перелистывание по клику
$("div.right").click(function()
{
slides.trigger("swiperight").trigger("moveend");
});
$("div.left").click(function()
{
slides.trigger("swipeleft").trigger("moveend");
});
|
|