【コピペOK!】スライドショーで要素を自動でスライドさせる方法!

スライドショーで要素を自動でスライドさせるにはslickを使用します。

slickとは、レスポンシブ・タッチデバイスに対応、カスタマイズ設定も豊富なスライダープラグインであり、ほとんどのWebサイトで使用されています。

slickは、cdnでも持ってくることは可能ですが、ファイルをダウンロードして自分のサーバー上にアップした方が処理が軽くなるのでWordPressでslickを使用する場合はファイルをダウンロードしてから使用するようにしましょう。

今回は、スライドショーで要素を自動でスライドさせる方法について以下の内容で解説していきます。

⚫︎ スライドショーで要素を自動でスライドさせる方法

⚫︎ WordPressで要素を自動でスライドショーさせる方法

slickとは

slickとは、スライダーを作成するためのプラグインとなります。
スライダープラグイン他にもがありますが、レスポンシブ・タッチデバイスに対応、カスタマイズ設定も豊富なスライダープラグインであることから世界的に利用されています。

スライドショーで要素を自動でスライドさせる方法

それでは、スライドショーで要素を自動でスライドさせる方法について紹介していきます。

slick-X.X.Xをダウンロードする

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

slickにアクセスし、[get it now]を押します。

そして、[Download Now]を押すと、slickファイルがダウンロードされます。

ダウンロードしたslickファイルを設置する

ダウンロードしたslickファイルをhtmlファイルと同じ階層に設置します。

slickファイルはそのままhtmlファイルと同じ階層に設置しても良いですが、下記のファイルだけ設置してもかまいません。

⚫︎ slick-theme.css
⚫︎ slick.css
⚫︎ slick.js
⚫︎ slick.min.js
⚫︎ ajax-loader.gif
⚫︎ fonts

設置するファイルが多いので下記のように、cssファイルは「css」でjsファイルは「js」で一つ上の階層にファイルを作るとファイルの構造が分かりやすくなります。

htmlファイルとjsファイルコードを追記

slickファイルを設置できましたら、htmlファイルとjsファイルに下記のコードを追記します。

sample.html

style.css

index.js

実行結果

要素が表示され、スライドショーで要素を自動でスライドされています。

WordPressで要素を自動でスライドショーさせる方法

WordPressで要素を自動でスライドショーさせる方法について紹介していきます。

ダウンロードしたファイルをテーマに設置する

ダウンロードしたslickファイルを現在使用しているテーマに設置します。

ダウンロードしたslickファイルを現在使用しているテーマに設置するにはFTPを使用します・
FTPを使用することで、サーバーにアップされたファイルの一覧を見たり、ファイルをサーバーにアップロード、またダウンロードやバックアップを行うことができますのでローカルのファイルをサーバーへ簡単に設置することができます。

今回は「FileZilla」を使ってslickのファイルをサーバーへ設置します。

phpファイルにコードを追記する

ダウンロードしたslickファイルをFTPで移動させた後は、各phpファイルにコードを追記します。

今回はTopページにスライドショーを自動でスライドして表示させてみます。

header.phpのheadタグ内に下記のコードを追記します。

header.php

front-page.phpには表示したい画像とjsファイルを追加していきます。

jsファイルはbodyタグを閉じる直前の場所に指定します。

front-page.php

既存のstyle.cssに下記のコードを追記します

style.css

既存のstyle.cssに下記のコードを追記します

index.js

コードを追記できましたら、実際に動かしてみましょう。

実行結果

WordPressで作成したWebサイトに自動で要素をスライドするスライドショーを追加しました。

今回のポイント

slickで要素を自動でスライドショー

⚫︎ スライドショーで要素を自動でスライドさせるにはslickを使用する

⚫︎ slickとは、スライダーを作成するためのプラグインである

⚫︎ ダウンロードしたslickファイルの中で「slick-theme.css」、「slick.css」、「slick.js」、「slick.min.js」、「ajax-「loader.gif」、「fonts」の6つのファイルを使用する

⚫︎ WordPressで要素を自動でスライドショーさせるにはFTPを使ってサーバーにファイルをアップロードする

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

フリーランスエンジニアの案件探し