запретить скользкому слайдеру двигаться назад, когда для автовоспроизведения установлено значение true, а для бесконечного установлено значение false - PullRequest
Новая
       36

запретить скользкому слайдеру двигаться назад, когда для автовоспроизведения установлено значение true, а для бесконечного установлено значение false

0 голосов
/ 29 ноября 2018

У меня есть скользкий слайдер с навигацией;слайды делятся на десятилетия (1935, 1940 и т. д.). Это параметры слайдера: 

this.slick_options = {
            infinite: false,
            speed: 300,
            autoplay: this.device === 'desktop',
            autoplaySpeed:1500,
            slidesToShow: 1,
            centerMode: true,
            variableWidth: true,
            arrows: true,
            useTransform: true,
            touchMove: false,
            pauseOnHover: false,
            responsive: [
                {
                    breakpoint: 1023,
                    settings: {
                        centerMode: false
                    }
                }
            ],
            swipe: this.device !== 'accessible'
        };

Когда пользователь нажимает на определенное десятилетие, это происходит: 

// navigation action
        self.$el.find('[data-gallery-toggle]').on('click', function() {
            let slider = self.$el.find('.gallery-content');
            let decade = $(this).data('gallery-toggle');
            let index = $(`[data-decade=${decade}]:first`).data('slick-index');
            slider[0].slick.slickGoTo(index);
            slider.slick('slickPlay');
        });

Я также установил некоторые события: 

_initSlick() {
        let self = this;

        self.$el.find('.gallery-content')
            .on('init', (event, slick) => {
                if(self.device === 'desktop') {
                    self.slidesLength = $('.slick-slide').length;
                    slick.$slides.on('click','.post-thumbnail', () => slick.$slider.slick('slickPause'))
                }
            })
            .on('afterChange', (event, slick, currentSlide,nextSlide) => {
                let decade = $(slick.$slides[slick.slickCurrentSlide()]).data('decade');
                let selectedNavigationElement = self.decadesNavigation.filter(`[data-gallery-toggle="${decade}"]`);
                self._switchClass(selectedNavigationElement);

                 if(self.device === 'desktop' && currentSlide === self.slidesLength - 1) {
                    slick.$slider.slick('slickPause');
                }

            }).slick(this.slick_options);

        // navigation action
        self.$el.find('[data-gallery-toggle]').on('click', function() {
            let slider = self.$el.find('.gallery-content');
            let decade = $(this).data('gallery-toggle');
            let index = $(`[data-decade=${decade}]:first`).data('slick-index');
            slider[0].slick.slickGoTo(index);
            slider.slick('slickPlay');
        });
    }

Как вы можете видеть, автовоспроизведение установлено в true, а бесконечное установлено в false, когда пользователь достигает последнего слайда (событие afterchenge), слайдер приостанавливается.

Кроме того, когда пользователь нажимает на одно из изображений, ползунок приостанавливается, когда пользователь нажимает на десятилетия, ползунок запускается снова

Проблема заключается в том, что при нажатии на одно издесятилетия, иногда ползунок вернется назад, а не вперед.Я имею в виду: если я на последнем слайде и нажимаю на предыдущее десятилетие, почему слайдер возвращается, а не вперед?

Спасибо

1 Ответ

0 голосов
/ 29 ноября 2018

Я думаю, что нашел решение;в основном я расширяю базовый параметр slick: 

changeDir: true

, а затем в AutoplayIterator: 

Slick.prototype.autoPlayIterator = function () {

        var _ = this;

        if (_.options.infinite === false) {

            if (_.direction === 1) {
//here I make the change
                if ((_.currentSlide + 1) === _.slideCount - 1 && _.options.changeDir)  {
                    _.direction = 0;
                }

                _.slideHandler(_.currentSlide + _.options.slidesToScroll);

            } else {
                if ((_.currentSlide - 1 === 0)) {

                    _.direction = 1;

                }

                _.slideHandler(_.currentSlide - _.options.slidesToScroll);

            }

        } else {

            _.slideHandler(_.currentSlide + _.options.slidesToScroll);

        }

    };

, а в index.js я просто устанавливаю новый параметр chengeDir в false

Кажется, сейчас работает

...