レスポンシブでスライダーを実装する方法（HTML/CSS/jQuery）

コーポレートサイトやECサイトなどのTOP画面として目に飛び込んでくる「スライダー」

目にしたことがある方も多いと思います。

さまざまな方針のWebサイトで使用されるUIであるスライダーは、Web制作を行う上で欠かせないものになってきています。

「カルーセル」や「スライドショー」のような呼ばれ方をするものも、名前が違うだけでスライダーと機能は同じだということはご存知でしょうか。本記事では名称を「スライダー」で統一します。

今回は以下の流れでレスポンシブなスライダーを作る方法について解説します。

1 レスポンシブなスライダーの作り方
2 レスポンシブスライダーを実装するJQueryプラグイン3選
3 まとめ

レスポンシブなスライダーの作り方

「TOP画面にスライダーを実装して！」

Web制作をやっていると、クライアントにこのような指示をされることは珍しくありません。

スライダーを実装するとなると、JQueryプラグインを使った実装を考える方も多いでしょう。

JQueryプラグインを使ったレスポンシブスライダーの実装は初心者でも取り組みやすく、ルールに基づいてコーディングをすればレスポンシブになります。

ですが、レスポンシブなスライダーは以下の2つの方法でも実装することができます。

HTML/CSSでの実装
HTML/CSS/Javascript(JQuery)での実装

今回は初心者の方でも使いやすいJQueryプラグインを主に紹介しますが、把握しておくべきそれぞれの実装方法のメリットも解説します。

HTML/CSSでの実装

HTML/CSSでレスポンシブスライダーを実装する場合、以下の2種類の方法があります。

1から自分でHTML/CSSを書く
CSSプラグインを導入する

HTML/CSSだけと聞くと「静的サイトの中で自動に動くスライダーを作れるの？」と思う方もいるかもしれません。HTML/CSSだけのWebサイトは確かに静的サイトですが、CSSのアニメーション機能を使えば、自動で動いたり、デバイス幅に合わせて変化するレスポンシブデザインだったりと多くの方が想定するスライダーを実装することができます。

ただし、Javascript(JQuery)を使ったりJQueryプラグインを使ったりするスライダーと比較すると、どうしても動的な要素や機能の面で劣ってしまうのは事実です。

HTML/CSSのみでレスポンシブスライダーを実装するとしたら、特に高度な機能を必要としておらずただ画像の変化を求めている時に利用するのがおすすめです。

HTML/CSS/Javascript(JQuery)での実装

JQueryプラグインを使ったスライダーの実装が人気な一方で、HTML/CSS/Javascript(JQuery)を1から自分でコーディングする方法もあります。

全て1から自分でコーディングするメリットは、カスタマイズのしやすさです。JQueryプラグインを使ったスライダーの実装は手軽ですが、カスタマイズをする際にはCSSやJavascript(JQuery)の知識が求められることも多いです。また、JQueryプラグインを使用したスライダーを実装する場合、ブラウザごとに表示を切り替えられないこともあります。

公開されているプラグインでは高機能すぎる
クライアントの意向に合わせてカスタマイズしたい
IEに対応しているスライダーを実装する必要がある
レスポンシブ対応をしているシンプルなJQueryプラグインがない

上記の3つのどれかで当てはまった場合、JQueryプラグインではなくHTML/CSS/Javascript(JQuery)を1からコーディングする方法でスライダーを実装するのがよいでしょう。

JQueryプラグインによる実装

レスポンシブなスライダーの実装と聞いたら、ほとんどの方が考える手段がJQueryプラグインを使った実装でしょう。

JQueryプラグインを使ってスライダーを作るメリットは、初心者の方でも手順通りに行えば簡単にレスポンシブスライダーを実装できることです。

JQueryプラグインは、スライダーを実装する上で求める機能のほとんどを網羅しています。機能だけではなく、モバイルフレンドリーな現代に欠かせないレスポンシブデザインも搭載されていることがほとんどです。

そのため「JavascriptやJQueryはよくわからない…」という方でも高機能なスライダーを実装できます。

JQueryプラグインは豊富な種類が無料公開されているため、求めている機能別にJQueryプラグインを使い分けるのもおすすめです。

レスポンシブスライダーを実装するJQueryプラグイン3選

ここからは初心者の方でも扱いやすく、簡単にレスポンシブスライダーを実装できるJQueryプラグインを厳選して紹介します。

プラグイン①Swiper

SwiperはAdobeやBMW、Disneyなどの大手企業でも使用されているJQueryプラグインです。

特徴的なのは、他のJQueryプラグインよりもモダン寄りなデザインであることです。SwiperはPC版と他のデバイスでの表示形式を変更することもできます。そのため、モダンでレスポンシブなスライダーを実装したいのであればSlickを選ぶことがおすすめです。

実装に必要なコード

Swiperの実装に必要な手順は以下の4点だけです。

headタグ内でcssを読み込ませる
body要素の終わりでJQuery/JQueryファイルを読み込ませる
HTMLのフォーマットに従ってコードを書く
起動するためのscriptを書く

まず、swiper専用のcssファイルをHTMLに読み込ませます。

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

1 2	<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css"> <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

JQueryプラグインを使用するために必要なJQueryファイルをbody要素の終わりで読み込みます。

<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="<a href="https://unpkg.com/swiper/swiper-bundle.min.js">https://unpkg.com/swiper/swiper-bundle.min.js</a>"></script>;

1 2	<script src="https://unpkg.com/swiper/swiper-bundle.js"></script> <script src="<a href="https://unpkg.com/swiper/swiper-bundle.min.js">https://unpkg.com/swiper/swiper-bundle.min.js</a>"></script>;

各ファイルの読み込みを指定したらHTMLを記載します。スライダーで表示したい要素をyour content に置き換えます。

<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>

    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>
    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
</div>

<div class="swiper-slide">Slide 1</div>

<div class="swiper-slide">Slide 2</div>

<div class="swiper-slide">Slide 3</div>

</div>

</div>

最後にbody要素の終わりか別途scriptファイルでslickを起動させるコードを書きます。

const swiper = new Swiper(".swiper-container");

1	const swiper = new Swiper(".swiper-container");

このプラグインのおすすめポイント

アニメーションが豊富
カスタマイズしやすい
モダンブラウザでの動作が安定している

プラグイン②slick

さまざまなJQueryプラグインがある中でも、安定して評価が高いプラグインがslickです。

slickは「JQueryプラグインをはじめて使う」という方でも手軽に使いやすく、必要とする機能のほとんどを搭載している万能なJQueryプラグインです。

Swiperと同様にブレイクポイントを指定すれば、デバイスの表示幅によってレスポンシブに画像サイズが変化します。また、スマートフォンやタブレットでスワイプ機能を搭載するかどうかも設定できます。

実装に必要なコード

slickは非常にシンプルなコードを記載するだけでレスポンシブスライダーを実装できます。

実装に必要な手順は以下の5点だけです。

slickの公式サイトから素材をダウンロードする
headタグ内でcssを読み込ませる
body要素の終わりでJQuery/JQueryファイルを読み込ませる
HTMLのフォーマットに従ってコードを書く
起動するためのscriptを書く

slickの公式サイトからダウンロードが完了した後の手順をご紹介します。

まず必要なのは、slick専用のcssファイルをHTMLに読み込ませることです。

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
// デフォルト表示を変更したい場合には別途cssを追加します
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>

// デフォルト表示を変更したい場合には別途cssを追加します

JQueryプラグインを使用するために必要なJQuery本体とJQueryファイルをbody要素の終わりで読み込みます。

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>

<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<script type="text/javascript" src="slick/slick.min.js"></script>;

CSS/JQueryファイルの読み込みはslick公式が公開しているCDNを使うことでも実行できます。ただしカスタマイズの幅が狭まることは把握しておきましょう。

// CSS
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
// JS
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

// CSS

// JS

各ファイルの読み込みを指定したらHTMLを記載します。スライダーで表示したい要素をyour content に置き換えます。

<div class="your-class">
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
</div>

<div>your content</div>

</div>

最後にbody要素の終わりか別途scriptファイルでslickを起動させるコードを書きます。

$(document).ready(function(){
  $('.your-class').slick({
    setting-name: setting-value
  });
});

$(document).ready(function(){

$('.your-class').slick({

setting-name: setting-value

});

このプラグインのおすすめポイント

JQueryを触ったことがない人でも手軽に使える
各ブラウザや画面幅での動作が安定している

プラグイン③Fullscreen Slit Slider

数あるJqueryプラグインの中でも、Fullscreen Slit Sliderは特にアニメーション要素が強いプラグインです。

他のJqueryプラグインと同様にレスポンシブスライダーを実装可能な上に、カスタマイズすることでフルスクリーン対応もできます。

「インパクトのあるTOP画面にしたい！」

このような要望が来た場合に、まず最初に候補に上がるレスポンシブスライダーのプラグインです。

機能面が優れている半面、JQueryやJavascriptの知識が必要になるためこれらを勉強したことがある方におすすめです。

実装に必要なコード

slickは非常にシンプルなコードを記載するだけでレスポンシブスライダーを実装できます。実装に必要な手順は以下の5点だけです。

Fullscreen Slit Sliderの公式サイトから素材をダウンロードする
headタグ内でcssを読み込ませる
body要素の終わりでJQuery/JQueryファイルを読み込ませる
HTMLのフォーマットに従ってコードを書く
起動するためのscriptを書く

からダウンロードが完了した後の手順をご紹介します。

まずは専用のcssファイルをHTMLに読み込ませます。

<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />

1 2	<link rel="stylesheet" type="text/css" href="css/style.css" /> <link rel="stylesheet" type="text/css" href="css/custom.css" />

JQueryプラグインを使用するために必要なJQuery本体とJQueryファイルをbody要素の終わりで読み込みます。

<script type="text/javascript" src="/code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/modernizr.custom.79639.js"></script>
<script type="text/javascript" src="js/jquery.ba-cond.min.js"></script>
<script type="text/javascript" src="js/jquery.slitslider.js"></script>

各ファイルの読み込みを指定したらHTMLを記載します。スライダーで表示したい要素をyour content に置き換えます。

<div id="slider" class="sl-slider-wrapper">
	<div class="sl-slider">
		<div class="sl-slide bg-1">
			<div class="sl-slide-inner">
				<div class="deco" data-icon="H"></div>
				<h2>A bene placito</h2>
				<blockquote>
					<p>You have just dined...</p>
					<cite>Ralph Waldo Emerson</cite>
				</blockquote>
			</div>
		</div>

		<div class="sl-slide bg-2">
			<div class="sl-slide-inner">
				<div class="deco" data-icon="q"></div>
				<h2>Regula aurea</h2>
				<blockquote>
					<p>Until he extends the circle...</p>
					<cite>Albert Schweitzer</cite>
				</blockquote>
			</div>
		</div>
		<div class="sl-slide bg-2">
			<!-- ... -- >
		</div>
		<!-- ... -->
	</div>
	<nav id="nav-arrows" class="nav-arrows">
		<span class="nav-arrow-prev">Previous</span>
		<span class="nav-arrow-next">Next</span>
	</nav>
	<nav id="nav-dots" class="nav-dots">
		<span class="nav-dot-current"></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
	</nav>
</div>

<h2>A bene placito</h2>

<p>You have just dined...</p>

<cite>Ralph Waldo Emerson</cite>

</blockquote>

</div>

<h2>Regula aurea</h2>

<p>Until he extends the circle...</p>

<cite>Albert Schweitzer</cite>

<span class="nav-arrow-prev">Previous</span>

</nav>

</nav>

</div>

最後にbody要素の終わりか別途scriptファイルでslickを起動させるコードを書きます。

$(function() {
$( '#sl-slider' ).slitslider();
});

$(function() {

$( '#sl-slider' ).slitslider();

});

このプラグインのおすすめポイント

インパクトを与えるスライダーを作れる
カスタマイズの幅が広い

まとめ

レスポンシブなスライダーを作る方法と、初心者の方にもおすすめできるJQueryプラグインを3つご紹介しました。

各デバイスに対応したレスポンシブなスライダーは、今やコーポレートサイトやECサイトだけではなく、さまざまな種類のWebサイトで使われています。

スライダーを1から作ることはカスタム性に長ける半面、どうしても時間のロスが発生します。特に初心者の方は苦戦することが多いでしょう。正確さとスピードを求められがちなWeb制作では、必要に応じてプラグインを導入する必要があります。

今回ご紹介させていただいたJQueryプラグインは、レスポンシブなスライダーを作れるプラグインのほんの一部です。搭載したい機能なデザイン性など、さまざまな要素に対応できるプラグインはまだまだあります。

どのプラグインがいいか迷った時は、本記事で紹介した内容を参考にして見てください。

その他、同じような話題で以下も取り上げていますので、よろしければご覧ください。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

記事に対するご意見・ご要望フォーム

minweb編集部（株）セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ！完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術 <AOHON>

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を１つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。

【全3種】他の資料もチェックする

無料で資料をダウンロードする

運営会社

Web制作・広告・コンサルティングのセルリア

運営：株式会社セルリア

レスポンシブでスライダーを実装する方法（HTML/CSS/jQuery）

レスポンシブなスライダーの作り方

HTML/CSSでの実装

HTML/CSS/Javascript(JQuery)での実装

JQueryプラグインによる実装

レスポンシブスライダーを実装するJQueryプラグイン3選

プラグイン①Swiper

実装に必要なコード

このプラグインのおすすめポイント

プラグイン②slick

実装に必要なコード

このプラグインのおすすめポイント

プラグイン③Fullscreen Slit Slider

実装に必要なコード

このプラグインのおすすめポイント

まとめ

運営会社

記事を検索する

人気の記事TOP20

CATEGORY

解析ツール

広告・マーケティング

デザイン・Web制作

Google Workspace

SNS運用