VPF::jQuery карусель - Форум программистов

MoLeX

Дата 18.12.2013, 07:41 (ссылка)

(нет голосов)

Загрузка ...

Местный пингвин

Профиль
Группа: Модератор
Сообщений: 4076
Регистрация: 17.5.2007

Репутация: нет
Всего: 140

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

Понадобилось расширить её, а именно сделать возможность перелистывания по кликам на соответствующие блоки (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");
});

--------------------

Amazing

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »