Wordpress

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

記事内に商品プロモーションを含む場合があります
おなやみにゃん
おなやみにゃん
流れるようなスライドショーを作りたいにゃ
にゃん花子
にゃん花子
はいはい、できますにゃん!Slickを使っていきましょう。

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

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

このブログで知れること
  1. WordPressでSlickを使う方法
  2. 【メインテーマ】横に流れ続けるスライドショー
  3. 【よくあるスライド例】左右に見切れるスライド
  4. 【よくあるスライド例】画像おくりのボタンをsvgファイルへ変更したスライドショー
  5. 【よくあるスライド例】縦方向のスライドショー
にゃん花子
にゃん花子
WordPressで初めてSlickを使う方のために、Slickの使い方も一緒にご紹介しています。Slick導入済みの方は、目次2以降の実際のSlickの設定をご覧くださいにゃん

WordPressでSlickを使う方法

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

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

slick.cssのCDNを読み込む

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

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

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

<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が安定しています。

<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のサイトより最新版をコピーしましょう。

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

手順の②と③については、htmlとcssを、次から紹介する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
にゃん花子
「コード書くには苦手」「コピペで動けば、それでOK」な、ノンプログラマー向け | マニアック・ピンポイントなWordpress TIPSが多め|文系から独学でWeb屋さんになった人|インフラ分野のわかるWebディレクター|主にWordpressのサイト立ち上げ、リプレイス、運用をしています|PC画面にブツブツ呟きながら、制作するのが好きです|坐骨神経痛とぎっくり腰経験済 | ブログ収益を保護猫活動に使いたいので、頑張る人 | 夜型人間から朝方に切り替え中|小学1年生の壁に負けじと2024年も奮闘します

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

wp-puzzle.com logo