スライド毎にスピードを変更したい……!Flexsliderで実装してみた

2017年7月27日

「1枚目のスライドを一瞬だけ出して、2枚目のスライドは少し早め、次からはゆっくり……」

普通のスライドショーを実装したつもりが、最後の調整でそんなものが入ったら、スライドから作り直し……なんですが、意地でもflexsliderのまま実装したくて挑戦してみました。

jquery(flexslider発火部分)

            $hook = $('.flexslider');
            $hook.flexslider({
                animation: "fade",
		slideshowSpeed: 3000,
                controlNav: false,
                directionNav: false,
                start: function (slider) {
                    clearInterval(slider.animatedSlides);
                    slider.animatedSlides = setInterval(slider.animateSlides, 0);
                },
                after: function (slider) {
                    if (slider.currentSlide == 0) {
                        clearInterval(slider.animatedSlides);
                        slider.animatedSlides = setInterval(slider.animateSlides, 500);
                    }
                    if (slider.currentSlide == 1) {
                        clearInterval(slider.animatedSlides);
                        slider.animatedSlides = setInterval(slider.animateSlides, 1000);
                    }
                    if (slider.currentSlide == 2) {
                        clearInterval(slider.animatedSlides);
                        slider.animatedSlides = setInterval(slider.animateSlides, 500);
                    }
                    if (slider.currentSlide == 3) {
                        clearInterval(slider.animatedSlides);
                        slider.animatedSlides = setInterval(slider.animateSlides, 2000);
                    }
                    if (slider.currentSlide == 4) {
                        clearInterval(slider.animatedSlides);
                        slider.animatedSlides = setInterval(slider.animateSlides, 2000);
                    }
                    if (slider.currentSlide == 5) {
                        clearInterval(slider.animatedSlides);
                        slider.animatedSlides = setInterval(slider.animateSlides, 2000);
                    }
                    if (slider.currentSlide == 6) {
                        clearInterval(slider.animatedSlides);
                        slider.animatedSlides = setInterval(slider.animateSlides, 2000);
                    }
                    if (slider.currentSlide == 7) {
                        clearInterval(slider.animatedSlides);
                        slider.animatedSlides = setInterval(slider.animateSlides, 2000);
                    }
                    if (slider.currentSlide == 8) {
                        clearInterval(slider.animatedSlides);
                        slider.animatedSlides = setInterval(slider.animateSlides, 2000);
                    }
                    if (slider.currentSlide == 9) {
                        clearInterval(slider.animatedSlides);
                        slider.animatedSlides = setInterval(slider.animateSlides, 2000);
                    }
                }
            });

slider.animatedSlides = setInterval(slider.animateSlides, 1000);

この部分の数字を変えると、どんどん速さが変わります。
問題点は、スライドの枚数分書かないとスピードがコントロールできないこと。
デフォルト値を決めておくことはできないのでしょうか……。

参考:

https://stackoverflow.com/questions/13269438/flexslider-different-slideshow-speed-on-each-slide