Written by Kasumi

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スライダーで動的にスライド開始位置を変更する方法について紹介しました。

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

目次

関連記事

slick

【jQuery】slickで現在のスライド番号と総数を表示する方法

更新日:2022.11.25
654
slick

【簡単】slickスライダーでデバイス事にオプションを切り替えよう【レスポンシブ設定を追加】

更新日:2022.11.25
683
slick

【簡単】slickスライダーに画像が徐々に拡大されるズーム機能を導入しよう

更新日:2022.11.25
277
slick

slickスライダーの矢印を画像にし、上下中央揃えの位置にカスタマイズする方法。【簡単】

更新日:2022.11.25
2182