2024.01.01 2024.09.02

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

にゃん花子

記事内に商品プロモーションを含む場合があります

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

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

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

このblogでわかること

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

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

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

WordPressでSlickを使う方法
横に流れ続けるスライドショー
左右に見切れるスライド
画像おくりのボタンをsvgファイルへ変更したスライドショー
縦方向のスライドショー
その他のslickオプション

Google広告

WordPressでSlickを使う方法

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

cdsの読み込み（3種）

slick.css
JQuery
slick.js

slick スライドショー用のHTMLを記載する

slick 用のjavascriptを記載する

slick.cssのCDNを読み込む

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

<head>の中に読み込みます

1<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
2// Add the new slick-theme.css if you want the default styling
3<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>

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

jQueryのCDNを読み込む

Jqueryが必要なため、読み込みます。

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

slick.jsのCDN

<body>と閉じタグの直前に読み込みます。

1<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
2<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
3<script type="text/javascript" src="slick/slick.min.js"></script>