【コピペOK】カルーセルスライダー(カルーセルバナー)の作り方【jQuery】

  • このエントリーをはてなブックマークに追加
カルーセルスライダー(カルーセルバナー)

サイトのメインビジュアルやキャンペーンの告知などでよく見るカルーセルスライダー(カルーセルバナー)の作り方を解説します。

スライダーに使う画像を準備できていれば、後は基本的にコピペで完結しますので、コーディングの知識が一切無くても大丈夫です。とても簡単で、実際の作業にかかる時間は1分程度です。

カルーセルスライダー(カルーセルバナー)の完成形

まず、完成形がどのようなものになるか確認しましょう。以下に、基本形とアレンジ形(ふわっと切り替わる)の見本をそれぞれ掲載します。

基本の形

複数のバナー画像が一定間隔でスライドしていく、基本的な形です。

  • 期間限定 10,000円OFF
  • 期間限定 送料無料
  • 期間限定 全品半額

ふわっと切り替わる形

バナーがふわっと切り替わるエフェクトを加えたパターンです。凝った印象を与えることができますが、アレンジにかかる時間は基本形にプラスして5秒くらいです。

  • 期間限定 全品半額
  • 期間限定 送料無料
  • 期間限定 10,000円OFF

カルーセルスライダー(カルーセルバナー)の作り方

それでは、具体的な作り方を見ていきましょう。

HTML、CSS、jQueryの3つの技術を扱いますが、みなさんが行う必要があるのはURLの差し替えだけで、あとはそのままコピペをするだけで大丈夫です。

まずはHTMLです。下記のコードをコピペして、URLを表示させたいバナー画像のものに、altテキストをバナーの説明文にそれぞれ差し替えます(ハイライトを入れている箇所です)。


<div>
	<ul class="slider">
	    <li><img src="/img/banner1.png" alt="期間限定 10,000円OFF"></li>
	    <li><img src="/img/banner2.png" alt="期間限定 送料無料"></li>
	    <li><img src="/img/banner3.png" alt="期間限定 全品半額"></li>
	</ul>
</div>

次にCSSとjQueryです。まず、下記のCSSへのリンクを、そのまま<head></head>の間に挿入してください。

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet" type="text/css">

そして、下記のJavaScriptファイルへのリンクとjQueryの記述を、そのまま</body>の直上に挿入してください。


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.1.0/jquery-migrate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$('.slider').slick({
		autoplay: true,
		dots: true,
	});
</script>

これだけで基本形は完成です。非常に簡単ですね。

ふわっと切り替わるようにするアレンジは、jQueryに下記のハイライトがかかっている1行を追加するだけOKです。


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.1.0/jquery-migrate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$('.slider').slick({
		autoplay: true,
		dots: true,
		fade: true,
	});
</script>

カルーセルスライダー(カルーセルバナー)のカスタマイズ方法【slick.js】

上記で基本形とふわっと切り替わるエフェクト付きの2パターンを紹介しましたが、他にも色々なカスタイズが可能です。ここでは使いやすいものをいくつかご紹介します。

実装方法は、jQueryの$('.slider').slick({の下に下記を追加するだけです。

autoplay: false,
自動スライドを無効化します。(autoplayのデフォルトの設定がfalse(無効)なので、上述の見本コードからautoplay: trueの行自体を消せば同様の結果が得られます)
autoplaySpeed: 任意の数字(ミリ秒),
スライドが自動で流れていく間隔を指定できます。ミリ秒は1,000分の1秒なので、例えば5秒で指定したい場合は5000と記入します。(デフォルトは3000です)
dots: false,
カルーセルスライダー(カルーセルバナー)の下に表示されるドットを消すことができます。(autoplayと同様、デフォルトがfalseなので、同じく行自体を消すことで同様の結果が得られます。
draggable: false, swipe: false,
ユーザーがカーソルや指でバナーを手動スライドさせることをできないようにする設定です。
slidesToShow; 任意の数字,
同時に表示させるバナーの数を指定できます。バナーの数が多い場合は、1つずつ表示させているとすべてを見るのに時間がかかるので、必要に応じて増やすのも手です。
slidesToScroll: 任意の数字,
一度のスクロールで流れていくバナーの数を指定します。例えばslidesToShow: 3,と指定した場合、slidesToScroll: 3,としておけば、3つずつ表示され、3つずつスライドされる形に設定できます。

もっと詳しく知りたい方は、slick – the last carousel you’ll ever needをご覧ください。今回の記事で解説したカルーセルスライダー(カルーセルバナー)はこの slick という仕組みを使って実装しています。

カルーセルスライダー(カルーセルバナー)のまとめ

カルーセルスライダー(カルーセルバナー)の作成とカスタマイズの方法を解説しました。ここまで見てきた通り、今回のやり方であれば非常に簡単に作成することができます。この記事で紹介したパターンに慣れてきたら、 slick のサイトに載っている応用的なカスタマイズにもぜひチャレンジしてみてください。


コンバージョン率を3分の操作で改善 CAO

  • このエントリーをはてなブックマークに追加