Webサイト関連

SLICK を使ってスライダーを実装する。答えつきなので初めての方 でも簡単に完成します

こんにちは Fotz cocoloの管理者です。
今回はご自身のWebサイトにスライダーを実装しようと云うお話です。
WordPressサイトに実装していますが、普通のサイトでも同様ですね。
WordPressと云えば、プラグインを利用してそれこそ簡単に設置することが可能で、簡単かも知れませんね。
代表的なWordPressプラグインとして SmartSlider はたいへん有名で無料の範囲でも使えますので好評ですよね。

しかし、これからWebを扱って行こうと云う方にとっては、HTMLとCSS、JsやjQuceryも少しだけ手の内に入れておいた方が良いかと考え、方法を記述することと致しました。
Slickという非常に簡単で効率も良くカスタマイズの幅も広い「jQueryのプラグイン」ですので、今後とも一緒に考えながら行って戴ければ大変ありがたいです。

最初に確認して下さい

 

 

Slickのページ
赤枠はファイルをダウンロードしたときに記述するもので
今回は、使用しませんが簡単に云うとCSSを二つ記述する、一つは(-theme)であることをご理解ください。
この下のCDNの方を記述します

 

 

今回は丸枠のページにあるCDNの方を記述します

この時、上のように2つ必要なので、下記で示すように2つ<head>内に(記述)貼り付けます。

CSSを貼り付けましょう
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.min.css">

抜粋したものが下記ですのでコピーして</head>直前に貼り付けて下さい。
*コピーするとそのまま使えますが  バージョンが更新される場合もあるのでSLICKのページで確認して下さい。

jQueryから貼り付けましょう

次に jQueryCDN から
jQuery 3.x
jQuery Core 3.6.1 - uncompressed, minified, slim, slim minified

minifiedを開いてコピー

両方貼り付けるわけですが、1つは上の jQuery の方もう一つは slickの方です。
</body>タグの前に貼り付けて下さい。

<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>


▲ 実際のデモ ▼コード

上のスライダーは下記の記述となります(画像余白CSSは下に書いてあります)
・ぶっちゃけ、面倒な方は<body>内に貼り付ければ簡単です、画像を変更してお使い下さい。
・slickを呼び出すための、上記のCSSを指定の箇所(head)内に記述すると同じ物が出来上がります

あとはslickページのデモで紹介されているライブラリーやオプションを参考にレベルアップしてみて下さい。

<div class="slider">
<div><img src="https://fotz.jp/wp-content/uploads/2022/09/aaa01.jpg" alt=""/></div>
<div><img src="https://fotz.jp/wp-content/uploads/2022/09/aaa02.jpg" alt=""/></div>
<div><img src="https://fotz.jp/wp-content/uploads/2022/09/aaa03.jpg" alt=""/></div>
<div><img src="https://fotz.jp/wp-content/uploads/2022/09/aaa04.jpg" alt=""/></div>
<div><img src="https://fotz.jp/wp-content/uploads/2022/09/aaa05.jpg" alt=""/></div>
<div><img src="https://fotz.jp/wp-content/uploads/2022/09/aaa06.jpg" alt=""/></div>
</div>

<!-- <script>は </body>の直前に貼り付けて(記述)下さい -->

<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

<script>
$('.slider').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3,
autoplay: true,
arrows: false,
dots: false
});
</script>

 

/* WordPressをお使いの場合は追加CSSに記述すると スライド左右の余白調整が出来ます 現在左右 5pxの余白 */

.slider .slick-slide {
margin:0 5px;
}

いかがだったでしょうか、上手く行かない場合は最初に戻って再度試してみましょう
今後もこう云ったものを発信していきますので、またご訪問下さい。

-Webサイト関連