レスポンシブ対応のスライダー「slick」を設置したい

JavaScript

2021-01-31

jQueryスライダーなら「slick」

jsでスライダーを設置するならjQueryのプラグイン「slick」がおすすめ!
カスタマイズ例もネットでいろいろ紹介されていますね。
ここでは基本的な設定をご紹介します。

公式サイトはこちらです。「get it now」から必要なファイルをダウンロードできます。

導入

必要なファイルをhead内に読み込みます。URLはパスに合わせて書き換えます。

<link rel="stylesheet" type="text/css" href="slick.css"/>
<link rel="stylesheet" type="text/css" href="slick-theme.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="slick.min.js"></script>

 

3行目はjQueryですね。他のjsで使用していれば追加しなくてもOKです。
動かない場合はscriptをbodyの閉じタグの直前にしたり、他のjsと順番を変えて試します。

画像を設置

スライダー表示位置にスライドさせたい画像を設置します。

<ul class="slick">
 	<li><img src="img/slide001.jpg" alt="" /></li>
 	<li><img src="img/slide002.jpg" alt="" /></li>
 	<li><img src="img/slide003.jpg" alt="" /></li>
</ul>

 

スライダーを動かすスクリプトを設置

カスタマイズが可能です。こちらはシンプルなスライダーの一例です。

<script>
$('.slick').slick({ //カッコ内には画像を囲んだ要素のクラス名(またはid名)を入れます。
    dots: true, //インジケーター表示
    autoplay: true, //自動再生
    autoplaySpeed:6000,//再生の速さ
    arrows: false, //矢印
    fade: false, //フェード

  });
</script>

 

スタイルの調整

cssでスタイルを整えます。

-JavaScript

関連記事

vivus.jsを使って文字のアニメーションを作りたい!

ロゴの輪郭が描かれていくものや、文字や線を書いているように表示されるアニメーションを見かけます。 今回はSVGとvivus.jsで作れるアニメーションの作り方について調べました! やりたいこと ・Il …

オンマウスで開くslideToggleを使った簡単なアコーディオンメニュー

hoverで表示する、jQueryのナビゲーションメニューを作りたい! カーソルをあてるとサブメニューがスライド表示される、下のようなサンプルを作りたいと思います! (こちらは装飾をしていないので、デ …