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

【簡単】slickを使い左右チラ見せ中央固定のカルーセルスライダーを実装する方法

更新日:2022.11.25
9192
slick

【簡単】slickスライダーで一瞬縦並びになり崩れた表示になるのを対処する方法

更新日:2022.11.25
10643
slick

【簡単】slickスライダーでサムネイルを連動・固定2列2段以上で表示させる方法

更新日:2022.11.25
11498
slick

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

更新日:2022.11.25
4588