MENU
Wordpress

つらつら流れる、横に流れ続けるスライドショーの作り方【Slick＆WordPressを利用】

にゃん花子

つらつら〜水が流れるようなスライドショーを作りたいにゃ。Slickを使っていきましょう。

一般的なスライドショーは、1枚ごとに横スライドやフェードに切り替わりますが、
映画のフィルムのように横に流れ続けるスライドショーも作れます。

今回はSlickを使用して、無料で制作していきましょう。
WordPressでのSlickの使い方と、横に流れ続けるスライド、よく使うスライドショーの事例もご紹介します！

このblogでわかること
  1. WordPressでSlickを使う方法
  2. 【メインテーマ】横に流れ続けるスライドショー
  3. 【よくあるスライド例】左右に見切れるスライド
  4. 【よくあるスライド例】画像おくりのボタンをsvgファイルへ変更したスライドショー
  5. 【よくあるスライド例】縦方向のスライドショー

WordPressで初めてSlickを使う方のために、Slickの使い方も一緒にご紹介しています。

Slick導入済みの方は、目次２以降の実際のSlickの設定をご覧くださいにゃん。

目次
  1. WordPressでSlickを使う方法
    1. slick.cssのCDNを読み込む
    2. jQueryのCDNを読み込む
    3. slick.jsのCDN
  2. 横に流れ続けるスライドショー
  3. 左右に見切れるスライド
  4. 画像おくりのボタンをsvgファイルへ変更したスライドショー
  5. 縦方向のスライドショー
  6. その他のslickオプション

WordPressでSlickを使う方法

slickをWordpressで使う方法は、以下の3つのステップです。

cdsの読み込み（3種）
  • slick.css
  • JQuery
  • slick.js
slick スライドショー用のHTMLを記載する
slick 用のjavascriptを記載する

slick.cssのCDNを読み込む

header.phpに、slick.cssを読み込みます。読み込むのは２種類のため、下記コードをコピーするか、slickのサイトより最新版をコピーしましょう。

1<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>

もしslickのボタンやページ送りの矢印を使用する場合は、下記のcssも読み込んでおきましょう。こちらを読み込まないと、ブラウザのデフォルトスタイルのボタンになります。

1<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.min.css">

jQueryのCDNを読み込む

jQueryはfooter.phpに読み込みます。いろいろなところで公開されていますが、特にこだわりがなければGoogle Hosted Librariesが安定しています。

1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

slick.jsのCDN

slick.jsもfooter.phpへ読み込みます。こちらはjQueryの後に記載しましょう。slickのサイトより最新版をコピーしましょう。

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

手順の②と③については、htmlとcssとjsを、次から紹介するcodepenを参考にコピペしてください。

横に流れ続けるスライドショー

See the Pen Slick slider turatura by tsucchikimiko (@nyanhanako) on CodePen.

左右に見切れるスライド

See the Pen Slick slider giveup by tsucchikimiko (@nyanhanako) on CodePen.

画像おくりのボタンをsvgファイルへ変更したスライドショー

こちらの例では、slick-theme.min.cssを読み込まず、ブラウザのデフォルトのままになっている想定のデモです。

See the Pen Slick slider giveup by tsucchikimiko (@nyanhanako) on CodePen.

縦方向のスライドショー

See the Pen Slick slider turatura by tsucchikimiko (@nyanhanako) on CodePen.

その他のslickオプション

slickは本家サイトと、日本語に翻訳されたサイトに例がたくさんのっているので、おすすめです。

Slick本家 → https://kenwheeler.github.io/slick/

日本語訳のサイト → https://tr.you84815.space/slick/

ABOUT ME
にゃん花子
にゃん花子
Instagram
「コード書くには苦手」「コピペで動けば、それでOK」な、ノンプログラマー向け | マニアック・ピンポイントなWordpress TIPSが多め｜文系から独学でWeb屋さんになった人｜インフラ分野のわかるWebディレクター｜主にWordpressのサイト立ち上げ、リプレイス、運用をしています｜PC画面にブツブツ呟きながら、制作するのが好きです｜坐骨神経痛とぎっくり腰経験済 | ブログ収益を保護猫活動に使いたいので、頑張る人 | 夜型人間から朝方に切り替え中｜小学１年生の壁に負けじと２０２４年も奮闘します
Recommend
こちらの記事もどうぞ
記事URLをコピーしました