Question

我有一个带有导航功能的光滑滑块；幻灯片除以几十年（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');
        });
    }

如您所见，当用户到达最后一张幻灯片（Afterchenge事件）时，滑块会暂停。自动播放设置为true，而infinite设置为false。

此外，当用户单击其中一张图像时，滑块会暂停，而当用户单击数十年时，滑块会再次启动

问题是，当我单击几十年之一时，有时滑块会向后移动而不是向前移动。我的意思是：如果我在最后一张幻灯片上并单击上一个十年，为什么滑块向后而不向前？

谢谢

Answer 1

我想我已经找到了解决方案；基本上，我已经扩展了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

似乎现在可以工作

当自动播放设置为true且无限设置为false时，防止滑动滑块向后移动

1 个答案: