Вертикальная карусель - телефон как выберите - нужен совет, как добавить l oop (пример Codepen) - PullRequest
Новая
       51

Вертикальная карусель - телефон как выберите - нужен совет, как добавить l oop (пример Codepen)

0 голосов
/ 12 марта 2020

Прежде всего, вот код моей карусели:

https://codepen.io/SamiSom/pen/GRJQaZL

Вот код javascript, который я сейчас использую: 

const vScrollList = document.querySelector('.js-vertical-scroll-list');

if (vScrollList !== null) {

    $(vScrollList)
        .on('ux.vScrollList.init', function() {
            let items = this.querySelectorAll('.js-vertical-scroll-list-item');
            items[1].classList.add('is-active');

            $(this).trigger('ux.vScrollList.setHeight');
            $(this).trigger('ux.vScrollList.onWheel');
        })
        .on('ux.vScrollList.setHeight', function() {
            const item = this.querySelector('.js-vertical-scroll-list-item');
            let itemHeight = parseFloat(getComputedStyle(item, null).height.replace("px", ""));

            $(this).css('height', itemHeight * 3);
        })
        .on('ux.vScrollList.onWheel', function() {
            let depth = 0;
            let depthMax = this.querySelectorAll('.js-vertical-scroll-list-item').length;

            this.addEventListener('wheel', e => {
                let list = this.querySelector('ul');
                let items = list.querySelectorAll('.js-vertical-scroll-list-item');
                let item = this.querySelector('.js-vertical-scroll-list-item');
                let itemHeight = parseFloat(getComputedStyle(item, null).height.replace("px", ""));
                let direction = (e.deltaY > 0) ? 'forwards' : 'backwards';

                function setActiveItem() {
                    for (let i = 0; i < items.length; i++) {
                        if (items[i].classList.contains('is-active')) {
                            items[i].classList.remove('is-active');
                            (direction === 'forwards') ? items[i + 1].classList.add('is-active') : items[i - 1].classList.add('is-active');
                            break;
                        }
                    }
                }

                // move forwards
                if (direction === 'forwards' && depth < depthMax - 3) {
                    depth += 1;
                    let value = -itemHeight * depth;
                    TweenMax.to(list, 1.5, {y: value, ease: Power1.easeOut});
                    setActiveItem();
                }

                // move backwards
                if (direction === 'backwards' && depth > 0) {
                    depth -= 1;
                    let value = -itemHeight * depth;
                    TweenMax.to(list, 1.5, {y: value, ease: Power1.easeOut});
                    setActiveItem();
                }
            });
        })
        .trigger('ux.vScrollList.init');

    window.addEventListener('resize', function() {
        $(vScrollList).trigger('ux.vScrollList.setHeight');
    });
}

Это работает так, как я ожидаю (на событии колеса, когда курсор находится над каруселью), за исключением одного - я хочу, чтобы l oop было правильно.

...