• slick

slickスライダーで動的にスライド開始位置を変更する方法

slickスライダーで動的にスライド開始位置を変更したい。

本記事ではこのような悩みを解決。

実装例を元に解説します。

スライド開始位置を変更するslickオプション

// スライド位置
var slide_int = 0;

// ハッシュによって開始位置を変更
var hash = location.hash;
if (hash == "#slide01") {
  slide_int = 0;
} else if (hash == "#slide02") {
  slide_int = 1;
} else if (hash == "#slide03") {
  slide_int = 2;
}

// slick実行関数
$('.slider').slick({
  dots: true,
  arrows: true,
  initialSlide: slide_int//スライド開始位置
});

動的にスライド開始位置を変更するコード例です。

動的要因としてはURLのハッシュによってスライド位置を変更してます。

slickのスライド開始位置を変更するにはinitialSlideオプションを使います。

スライド要素には0から始まる順番が数値で決められています。

initialSlideの値にその順番を割り当てる事によりスライド開始位置を変更できるようになります。

initialSlideをslickの実行関数内でオプション指定。

値に動的要因で変更されるスライドの順番を変数で指定すればOKです。

以上で実装完了です。

まとめ

slickスライダーで動的にスライド開始位置を変更する方法について紹介しました。

以上で解説を終わります。