代码之家 › 专栏 › 技术社区 › Giacomo Ciampoli

当“自动播放”设置为“真”且“无限”设置为“假”时,防止Slick滑块向后移动。

slick.js slick jquery javascript

Giacomo Ciampoli · 技术社区 · 7 年前

我有一个带导航的光滑滑杆;滑杆分为几十年(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');
        });
    }

如您所见,autoplay设置为true,infinite设置为false,当用户到达最后一张幻灯片(在chenge事件之后)时,滑块将暂停。

另外,当用户单击其中一个图像时,滑块将暂停,当用户单击数十年后,滑块将再次启动。

问题是,当我点击几十年中的某一年时,有时滑块会后退而不是前进。我的意思是:如果我在上一张幻灯片上,并点击前十年,为什么幻灯片会后退而不是前进?

谢谢

1 回复 | 直到 7 年前

Giacomo Ciampoli 7 年前

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

似乎现在有效