【jQuery】slick()でカルーセルスライダーを表示する!

(この記事は2022年2月1日に投稿されました。)

jQueryのslick()を使用すると、カルーセルスライダーを表示することができます。

slick()とは、スライダーを作成するためのメソッドであり、スライダーを作成するためのJavaScriptプラグインを使用します。

しかし、slick()は「slick.js」というライブラリを使用する必要があり、普段のjQueryライブラリだけでは使用できませんので注意してください。

そして、slick()でカルーセルスライダーを表示するにはslickファイルをダウンロードして使用する方法slickファイルのCDNを使用する方法の2つがあります。

どちらの方法でもslick()を使用できますが、メリットデメリットがありますので、自分に合った方法を選択しましょう。

今回はjQueryのslick()でカルーセルスライダーを表示する方法について紹介していきます。

この記事はこんな方におすすめ
⚫︎ slick()を使ってカルーセルスライダーを表示させたい




slick()とは?

slick()とは、スライダーを作成するためのJavaScriptプラグインを表示させるメソッドとなります。

slickはjQueryベースで作成されており、カスタマイズ設定も豊富なスライダープラグインであることから世界的に利用されています。

他にもスライダーを作成するためのプラグインはありますが、世界的に利用されていることから、slickはスライダープラグインの代表格となっています。

Sossy

slick()とは並んでいる要素をスライダーとして表示するためメソッドとなります。
しかし、slick()はslick.jsの中にあるので、jQueryライブラリを呼び出しただけでは使用することができません。

slick()でカルーセルスライダーを表示するには?

slick()でカルーセルスライダーを表示するには「slick.js」というライブラリを使用する必要があります。

普段のjQueryライブラリには準備されておらず、jQueryライブラリだけでslick()を使用してもエラーになります。

そのため、slick()を使用したいファイルにslick.js(slickファイル)をリンクさせる必要があるということです。

そして、slick()でカルーセルスライダーを表示するには下記の2つの方法があります。

⚫︎ slickファイルをダウンロードして使用する方法
⚫︎ slickファイルのCDNを使用する方法

何を言っているのかよくわからないかと思いますのでそれぞれ紹介していきます。

slickファイルをダウンロードして使用する方法

まず、一つ目はslickファイルをダウンロードして使用する方法です。

こちらの方法はslickファイルをダウンロードし、使用したいファイルに設置することでslick()でカルーセルスライダーを表示することができます。

slickファイルをダウンロードしているため、ダウンロードしたファイルを消さない限りは永遠に使用することができます。

そのため、こちらの方法では下記のような手順となります。

1
slickファイル(slick-X.X.X)をダウンロードする
サイトにあるslickファイルをダウロードします。
2
ダウンロードしたslickファイルをディレクトリに設置する
ダウロードしたslick()ファイルをディレクトリに設置します。
3
ダウンロードしたファイルをhtmlファイルにリンクさせる
ダウンロードしたファイルをhtmlファイルにリンクさせます。
4
ダウンロードしたslick()を使用する
ダウンロードしたslick()を使用してカルーセルスライダーを表示させます。

slickファイル(slick-X.X.X)をダウンロードする

まずは、slickファイルをダウンロードします。

slick[get it now]をクリックします。

slickファイル(slick.js)のダウンロード方法1

すると、入手方法について聞かれますので、[Download Now]の順番でクリックすると、ダウンロードが始まります。

slickファイル(slick.js)のダウンロード方法2

ダウンロード完了後、「slick-X.X.X」が自分のPCにダウンロードされます。

silckファイル(slick.js)のダウンロード方法3

ダウンロードしたslickファイルをディレクトリに設置する

ダウンロードが完了しましたら、次はダウンロードしたslickファイルをディレクトリに設置します。

ダウンロードされたファイルの中の「slick」というファイルの中から下記のファイルを取り出します。

⚫︎ slick-theme.css
⚫︎ slick.css
⚫︎ slick.js
⚫︎ slick.min.js
⚫︎ ajax-loader.gif
⚫︎ fontsファイル

上記のファイルを取り出せたら、ディレクトリを作成し、下記の画像のように階層化します。

slickファイル(slick.js)のディレクトリ設定

Sossy

slickファイルを設置する場合は、ファイルが多くなるのでCSSファイルは「css」でjSファイルは「js」で一つ上の階層にファイルを作ると分かりやすくなりますよ。

ダウンロードしたslickファイルをhtmlファイルにリンクさせる

slickファイルをディレクトリに設置できましたら、ダウンロードしたファイルをHTMLファイルにリンクさせていきます。

先ほど設置したslickファイルをHTMLファイルに追記し、使用できるようにします。

すると、下記のコードのようになります。

⚫︎ example.html

● 実行結果

slick()を使ってカルーセルスライダーを表示した結果(ダウンロードしたslickファイルをリンク)

まだslick()を使用していないため、要素が縦に並んでいる状態になっています。

ダウンロードしたslick()を使用する

HTMLファイルにリンクできましたら、ダウンロードしたslick()を使用していきます。

slickファイルをリンクさせたことで、htmlファイル内でslick()を使用することが可能となります。

そのため、カルーセルスライダーにしたい要素のクラス名やid名を指定し、slick()を使用すると、指定した要素がカルーセルスライダーとして表示されます。

先ほどのexample.htmlの</body>の真上に下記のコードを追記します。

⚫︎ example.html

● 実行結果

slick()を使ってカルーセルスライダーを表示した結果(ダウンロードしたslick()を使用)

slick()を使用し、縦に並んでいた要素がカルーセルスライダーとして表示されています。

「slidesToShow: 4に」設定することで4つの要素が同時に表示され、「slidesToScroll: 2」に設定することで毎回2つの要素がスクロールされています。

slickファイルのCDNを使用する方法

2つ目はslickファイルのCDNを使用する方法です。

CDNとは「Content Delivery Network(コンテンツデリバリーネットワーク)」といい、ウェブコンテンツを効率的かつスピーディーに配信できるよう設置されたネットワークになります。

イメージは、slickファイルが置かれているサーバーに接続し、リンクさえすれば誰でも使用することができるような感じです。

つまり、CDNを利用するとリンク先のコードを記述するだけでできるので、slick()を使用できるまでの手順が少なくとても簡単です。

しかし、slickファイルが置かれているサーバーが無くなってしまうとslick()が使用できなくなりますので注意してください。

そのため、CDNを使用する方法だと下記の手順でカルーセルスライダーを表示することができます。

1
HTMLファイルにslickファイルのCDNを追記する
slickのCSSファイルとJSファイルのCDNをHTMLファイルに記述します。
2
CDNでリンクさせたslick()を使用する
CDNでリンクさせたslick()を使用してカルーセルスライダーを表示させます。

HTMLファイルにslickファイルのCDNをリンクさせる

まずは、HTMLファイルにslickファイルのCDNをリンクさせていきます。

ここでは、slickのCSSファイルとJSファイルの2ファイルをリンクさせる必要があります。

CSSファイルをリンクさせるにはHTMLファイルの</head>の真上に下記のコードを追記します。

* slickファイルのCDNはこちらから取得することができます。

また、JSファイルをリンクさせるにはHTMLファイルの</body>の真上に下記のコードを追記します。

すると、下記のようなコードになります。

⚫︎ example2.html

● 実行結果

slick()を使ってカルーセルスライダーを表示した結果(CDNのslickファイルをリンク)

こちらもまだslick()を使用していないため、要素が縦に並んでいる状態になっています。

CDNのslick()を使用する

slickファイルのCDNのリンクが完了しましたら、CDNのslick()を使用して、スライダーを表示します。

CDNによってslickファイルをリンクさせているため、slick()を使用することができます。

そのため、先ほどのexample2.htmlの</body>の真上に下記のコードを追記します。

● 実行結果

slick()を使ってカルーセルスライダーを表示した結果(CDNのslick()を使用)

slick()を使用し、縦に並んでいた要素がカルーセルスライダーとして表示されています。

「slidesToShow: 4」により4つの要素が同時に表示されていますが、「slidesToScroll: 1」により毎回1つの要素がスクロールされています。

Sossy

slick()を使用する際は、jsファイルのCDNをリンクさせたコードの下に追記するよう注意してください。
でなければ、slick()を使用することができなくてエラーとなります。

WordPressでslick()を使用してカルーセルスライダーを設置するには

WordPressでslick()を使用してカルーセルスライダーを設置する場合は注意が必要です。

なぜなら、WordPressではHTMLファイルではなく、PHPファイルがメインとなるからです。

先程までは、HTMLファイルを使ってカルーセルを表示していましたがWordPressではサイトの各部分がPHPファイルによって作成されています。

そのため、slickのCSSファイルやJSファイルのリンク先のコードを数ファイル記述することになってきます。

また、slickファイルをダウンロードする方法の場合は、FTPを使って自分のサーバーにslickファイルを設置する必要があるため少し面倒です。

そのため、WordPressでslick()を使用してカルーセルスライダーを設置する方法について詳しくりたい方はこちらの記事をこ参考ください。

まとめ

⚫︎ slick()とは、スライダーを作成するためのJavaScriptプラグインを表示させるメソッドである

⚫︎ slick()でカルーセルスライダーを表示するには「slick.js」というライブラリを使用する必要がある

⚫︎ slick()でカルーセルスライダーを表示するには2つの方法がある
・ slickファイル(slick.js)をダウンロードして使用する方法
・ slickファイル(slick.js)のCDNを使用する方法

⚫︎ WordPressでslick()を使用してカルーセルスライダーを設置する場合はHTMLファイルではなく、PHPファイルがメインとなるため注意が必要

コメントを残す

メールアドレスが公開されることはありません。