当自动播放设置为真且无限设置为假时，防止光滑的滑块向后移动答案

【问题标题】：prevent slick slider to go backwards when autoplay is set to true and infinite is set to false当自动播放设置为真且无限设置为假时，防止光滑的滑块向后移动
【发布时间】：2018-11-29 14:33:18
【问题描述】：

我有一个带有导航的光滑滑块；幻灯片按十年划分（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，infinite 设置为 false，当用户到达最后一张幻灯片（afterchenge 事件）时，滑块会暂停。

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

问题是当我点击其中一个十年时，有时滑块会后退而不是前进。我的意思是：如果我在最后一张幻灯片上单击前十年，为什么滑块会后退而不是前进？

谢谢

【问题讨论】：

标签： javascript jquery slick.js

【解决方案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

现在好像可以了

【讨论】：