Как сделать, что бы слайды листались один за другим в обе стороны?

Question

[Павел Теплянский]

Я пытаюсь в нём сделать, что бы при каждом скролле мышкой вверх или вниз менялись классы к которым привязаны слайдеры. Они должны меняться по одному слайду за скролл, а меня как я не старался скачут как только могут.

Ссылка на весь проект: https://drive.google.com/file/d/0B69igkYBDgEmVnNZS...

Код отвечающий за логику анимации слайдов:

$(function () {
    var $pages = $('.pt-page'),
        pagesCount = $pages.length,
        current = 0,
        animating = false,
        vectorPage = 'bot-top';

    function animate(page) {
        if (vectorPage === 'bot')
        {
            animating = true;
            if (page - current > 0) {
                $pages.eq(current).addClass('blurA');
            } else {
                $pages.eq(page).removeClass('blurA');
            }
            $pages.eq(current).removeClass('pt-page-ontop');
            $pages.eq(page).addClass('pt-page-ontop pt-page-current pt-page-moveFromBottom');
            current = page;
            setTimeout(function () {
                animating = false;
            }, 1800);
        }

        if (vectorPage = 'top')
        {
            animating = true;
            if (page - current > 0) {
                $pages.eq(current).addClass('blurA');
            } else {
                $pages.eq(page).removeClass('blurA ');
            }
            $pages.eq(current).removeClass('pt-page-ontop');
            $pages.eq(page).addClass('pt-page-ontop pt-page-current pt-page-moveFromTop');
            current = page;
            setTimeout(function () {
                animating = false;
            }, 1800);
        }

    }

    function up() {
        if (current > 0) {
            animate(current - 1);
        }
    }

    function down() {
        if (current < pagesCount - 1) {
            animate(current + 1);
        }
    }

    $(document).on("mousewheel DOMMouseScroll", function (e) {
        if (animating) return;
        if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
            vectorPage = 'top';
            up();
        } else {
            vectorPage = 'bot';
            down();
        }
    });
});


$(document).ready();

Comments

[Сергей Сергей]

Есть предложение расставить в каждом блоке ветвлений alert(), это позволит отследить все изменения переменных х и у, а также при каком условии они меняются.
А все лишь для того, чтобы стало понятно, что будет достаточно одной переменной.

[Павел Теплянский]

Проставил алерты, но так и не разобрался, вниз нормально идёт, а на верх через одно место.

[Сергей Сергей]

начнем издалека:
элементов pt-page 5 или 4?

[Павел Теплянский]

Сергей Сергей: их 6

[Сергей Сергей]

и шестой меняется?
икс до шести доходит?

[Павел Теплянский]

Сергей Сергей: я поменял там условие на (x < 7)

[Сергей Сергей]

теперь икс будет до семи доходить, все элементы станут "блурА". Ладно.

Короче, при прокрутке вверх в строках размена классами можно поменять местами переменные cur и next.

[Павел Теплянский]

Сергей Сергей: Всё равно хрень какая то получается при листании вверх(

[Сергей Сергей]

должно было получиться так, что при прокрутке вверх для "следующего" класс "блурА" добавляется. Ну и ладно.

Значит потребуется расписать все 12 шагов: 6 вверх, 6 вниз; для каждого шага определить, какие номера элементов получают "блурА", какие его теряют. То есть, более наглядно увидеть зависимость чисел. Сравнить с имеющимися результатами по алерту.

До завтра.

Answer 1

[Павел Теплянский]

Вот так в итоге получилось и работает:

var cur = 1;
var next;
var animating = false;
var pagesCount = $pages = $('.pt-page').length;

$(document).on("mousewheel DOMMouseScroll", function(e) {
	if (animating) return;
	animating = true;
    if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
        //up
        next = cur - 1;
        next = Math.max(Math.min(next, pagesCount), 1);
        if (next != cur) {
        	console.log(cur);
        	$('.pt-page').removeClass('pt-page-current');
        	$('.pt-page-' + cur).addClass('pt-page-current').addClass('blurA');
        	$('.pt-page-' + cur).removeClass('pt-page-ontop').removeClass('pt-page-moveFromTop').removeClass('pt-page-moveFromBottom');
		    $('.pt-page-' + next).removeClass('blurA');
		    $('.pt-page-' + next).addClass('pt-page-current').addClass('pt-page-ontop').addClass('pt-page-moveFromTop');
	        cur--;
	    }
    } else {
        //down
        next = cur + 1;
        next = Math.max(Math.min(next, pagesCount), 1);
        if (next != cur) {
        	console.log(cur);
        	$('.pt-page').removeClass('pt-page-current');
        	$('.pt-page-' + cur).addClass('pt-page-current').addClass('blurA');
        	$('.pt-page-' + cur).removeClass('pt-page-ontop').removeClass('pt-page-moveFromTop').removeClass('pt-page-moveFromBottom');
		    $('.pt-page-' + next).removeClass('blurA');
		    $('.pt-page-' + next).addClass('pt-page-current').addClass('pt-page-ontop').addClass('pt-page-moveFromBottom');
        	cur++;
        }
    }
    setTimeout(function () {
        animating = false;
    }, 1800);
});



$(document).ready();

Answer 2

[Алексей Зуев]

Пример постраничного слайдера

Comments

[Павел Теплянский]

В Вашем примере за один скрол могут несколько слайдов смениться, как это исправить ?

[Алексей Зуев]

Павел Теплянский: 800мс до смены следующего слайда. Там проверка стоит не начинать следующую анимацию до остановки предыдущей

[Павел Теплянский]

Алексей Зуев: Сделал на основе Вашего примера, но получается так, что при анимации вверх она проигрывается только со второго на первый слайд, с остальными слайдами они просто статически меняются. Код в вопросе сменил на более актуальный.

[Алексей Зуев]

Павел Теплянский: желательно ссылку на рабочий пример

[Павел Теплянский]

Алексей Зуев: вот ссылка на весь проект https://drive.google.com/file/d/0B69igkYBDgEmVnNZS...

[Алексей Зуев]

Павел Теплянский: вы сделали не на основе моего примера, а на основе примера с tympanus. Вам нужно понять, что делает конкретная анимация. И вы не поняли мой js. Там есть уже условие на проверку - вверх листаем или вниз. Вы зачем-то надублировали код

[Павел Теплянский]

Алексей Зуев: Спасибо за ответ, у меня ещё видимо слишком маленький скилл, что бы в это разобраться всём. Буду дальше учиться)