2021/7/29当記事アイキャッチのように画像とテキストが連動して動くダブルスライダーを作成する方法を記します。slick.jsの基本的な使い方はご存知の前提で進めさせていただきますので、slick初めてという方は下記の記事などが参考になると思います。slick.jsでシンプルなスライダーを実装する方法【たった4ステップです】Contents1画像、テキストのスライダーを一つずつ作成2スライダーを連携する3テキストスライダーを装飾するソースコード全文1画像、テキストのスライダーを一つずつ作成まずはシンプルにスライダーを二つ作成します。中身は画像のものとテキストのものです。テキストスライダーには後のスタイル適用の都合上、枠(id=text-slider-container)とボックス(id=text-slider-box)を入れておきます。src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script><script>$("#main-slider").slick({//ここにオプション})$("#text-slider").slick({//ここにオプション})</script>一つ目のスライドのテキストが入ります一つ目のスライドのテキストが入ります一つ目のスライドのテキストが入ります二つ目のスライドのテキストが入ります二つ目のスライドのテキストが入ります二つ目のスライドのテキストが入ります三つ目のスライドのテキストが入ります三つ目のスライドのテキストが入ります三つ目のスライドのテキストが入ります2スライダーを連携するここでは画像のスライダーとテキストのスライダーを連携させます。ついでに以下3つも行います。//追加(矢印非表示})下のデモでは、画像スライダーを動かすとテキストも追従してくるようになっていると思います。一つ目のスライドのテキストが入ります一つ目のスライドのテキストが入ります一つ目のスライドのテキストが入ります二つ目のスライドのテキストが入ります二つ目のスライドのテキストが入ります二つ目のスライドのテキストが入ります三つ目のスライドのテキストが入ります三つ目のスライドのテキストが入ります三つ目のスライドのテキストが入ります3テキストスライダーを装飾するこのままではテキストスライダーが少し寂しいので、装飾します。いっても、うまい具合に重ねてボックスにテキストが入っているように見せる感じです。最後にコードを全文載せておきます。//矢印非表示})</script>以上、slick.jsでダブルスライダーを作成する方法でした。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。views2021/1/202023/5/13タイトルとURLをコピーしました。