Как расширить jQuery карусель с перелистыванием через зажатую кнопку мыши или пальцем на тачскрине?

Question

[Владимир Шишминцев]

Имеется карусель с перелистыванием через зажатую кнопку мыши или пальцем на тачскрине.

Понадобилось расширить её, а именно сделать возможность перелистывания по кликам на соответствующие блоки (div.right и div.left). Но тут и появилась проблема - клик перелистывает не на один шаг, а сразу до конца (то есть: мы находимся на 1 странице, всего их 5, клик на блок вызывает перелистывание на 5 страницу а не на вторую).

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");
});

Answer 1

[Владимир Шишминцев]

придумал решение

$("div.right").click(function()
{
     if (i === slides.length - 1 || i == 0 ) { return; }
     slides.eq(i - 1).trigger("activate").trigger("moveend");
});

$("div.left").click(function()
{
     if (i === slides.length - 1) { return; }
     slides.eq(i + 1).trigger("activate").trigger("moveend");
});

Answer 2

[Vit]

trigger("moveend") заменить на trigger("move") пробовали?

Comments

[Владимир Шишминцев]

@fornit1917 да, пробовал. тот же самый результат