slickの使い方。jQueryスライダーのシンプルなサンプル例。コピペも可。デザイナー、コーチ、ディレクター / いがわ

.

Memo

slickの使い方の例。コピペも可。

slickの、シンプルなサンプル。

slickの使い方。公式サイトの画像。

headタグ内に記述。

slickの使い方は一般的なスライダーと同様。

まずはjQuery本体とslickのJSと、slickのCSSを、CDNで読み込む。

HTML
<script src="https://code.jquery.com/jquery-3.6.2.min.js" integrity="sha256-2krYZKh//PcchRtd+H+VyyQoZ/e3EcrkxhM8ycwASPA=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js" integrity="sha512-HGOnQO9+SP1V92SrtZfjqxxtLmVzqZpjFFekvzZVWoiASSQgSr4cw9Kqd2+l8Llp4Gm0G8GIFJ4ddwZilcdb8A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" referrerpolicy="no-referrer">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" referrerpolicy="no-referrer">

ちなみにjQueryの読み込み位置は、bodyの閉じタグの前じゃなくても特に問題はない。

jQueryの公式サイトではhead内で読み込まれている。

参照元サイト:jQuery

bodyタグ内に記述

slickで動かしたい画像を記述する。

img要素のsrcやaltなどの属性は、設置時の内容に合わせる。)

HTML
<div class="slick">
 <div><img src="sample_01.jpg" alt="slickの使い方、サンプル01。"></div>
 <div><img src="sample_02.jpg" alt="slickの使い方、サンプル02。"></div>
 <div><img src="sample_03.jpg" alt="slickの使い方、サンプル03。"></div>
</div><!--slick-->

slickを設置したHTMLファイル(WordPressの場合はPHPファイル)で読み込めるようにする。

JavaScript
<script>
$(function(){
  $('.slick').slick({
    autoplay: true // 自動再生
  });
});
</script>

JavaScriptは、bodyの閉じタグの前でOK。

外部CSSファイル、もしくはHTMLファイルへ記述。

style.cssなどに記述する場合は、リンク切れにならないように気をつける。
また、styleタグを使って、HTMLファイル内へ書いた方が速度や動きが良い場合もある。

CSS
.slick img {
 width: 100%;
 height: auto;
}
実装結果。
slickによる、シンプルなサンプル。
slickの使い方、サンプル01。
slickの使い方、サンプル2。
slickの使い方、サンプル3。

これでほぼデフォルト状態のシンプルなslickスライダーが実装できる。

左右の矢印はhead内で読み込んだslickのCSSにより表示される。

  • 矢印は白っぽいので背景色が白だと同化してしまう。(CSSで上書き可能。)
  • 矢印がはみ出てしまう場合は、CSSのwidthの値で幅の広さを調整。

Photo by Caleb Fisher
Photo by Chris Andrawes


slickのスライド画像の上にテキストを乗せたい場合。

slickで動くスライド画像の上にテキストを乗せる。

スライダーの画像でも、positionプロパティやz-indexなどで重ねられる。slickのスライダー画像部分と、上に乗せたいテキストをdivなどで囲えば良い。

absoluteやz-indexを使うときは、親要素にposition: relativeが必要。

今回はしていないが、テキスト部分はフォントサイズなどのレスポンシブ対応をすると良い。)

petsサンプルのコード。
HTML
<div id="slick_box_01">

<div class="slick">
 <div><img src="sample_01.jpg" alt="slickの使い方、サンプル01。"></div>
 <div><img src="sample_02.jpg" alt="slickの使い方、サンプル02。"></div>
 <div><img src="sample_03.jpg" alt="slickの使い方、サンプル03。"></div>
</div><!--slick-->

<p class="text_01">slickで動くスライド画像の上にテキストを乗せた。</p>
<p class="text_02">テキスト部分はレスポンシブ対応を。</p>

</div><!--slick_box_01-->
CSS
#slick_box_01 {
 position: relative;
 z-index: 0;
}
.slick img {
 width: 100%;
 height: auto;
}
.text_01 {
 position: absolute;
 z-index: 1;
 top: 20px;
 left: 20px;
 background: #fff;
 padding: 5px 10px;
 color: #333;
}
.text_02 {
 position: absolute;
 z-index: 1;
 bottom: 25px;
 right: 20px;
 background: #fff;
 padding: 5px 10px;
 color: #333;
}
テキストが乗ったslickの例。
slickの使い方、サンプル1。
slickの使い方、サンプル2。
slickの使い方、サンプル3。

slickで動くスライド画像の前面に乗っているテキスト。

テキスト部分はレスポンシブ対応を。


jQueryはbodyの閉じタグの前じゃなくてもいい。

jQueryはhead内か、bodyの閉じタグの前か?

jQueryはbodyの閉じタグの前に書きましょう、とよく言われているが、必ずしもそうではない。実際には読み込み速度への影響も少ない。

知識の深い専門コーダーやプログラマーは別だが、JavaScriptやDOM操作になれていない初学者やデザイナーは、headタグの中に書いた方が安全で確実性が高い。

pets検証結果。

関連:jQueryの読み込み位置はhead内。(bodyの閉じタグの前じゃない!?)
関連:スライダーがうまく動かない時の対応。(jQueryはbodyの閉じタグの前じゃない。)

slickの使い方。jQueryスライダーに喜ぶワンちゃん。

以上、参考になれば幸いです。


Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。(元々はメモ書きでした。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真は主にUnsplashPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。

デザイナー、ディレクター、講師、コーチ / 井川宜久


免責事項について

  • 記事ページ(Memosのページ)は当初は文字通りメモ書きでした。その後、修正や更新をしております。
  • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ早急に対応いたします。
  • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。