タイトル・URLをコピー
記事タイトルレスポンシブでスライダーを実装する方法(HTML/CSS/jQuery)
記事URLhttps://digitor.jp/textbook/responsive-slider/
記事タイトルレスポンシブでスライダーを実装する方法(HTML/CSS/jQuery)
記事URLhttps://digitor.jp/textbook/responsive-slider/
POINTこの記事をざっくり言うと
レスポンシブレイアウトのスライダーを実装する方法
HTML/CSS/jQueryそれぞれの実装方法を解説
スライダーが作れるjQueryプラグインについて3つ紹介
コーポレートサイトやECサイトなどのTOP画面として目に飛び込んでくる「スライダー」
目にしたことがある方も多いと思います。
さまざまな方針のWebサイトで使用されるUIであるスライダーは、Web制作を行う上で欠かせないものになってきています。
「カルーセル」や「スライドショー」のような呼ばれ方をするものも、名前が違うだけでスライダーと機能は同じだということはご存知でしょうか。本記事では名称を「スライダー」で統一します。
今回は以下の流れでレスポンシブなスライダーを作る方法について解説します。
レスポンシブなスライダーの作り方
「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"> |
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>; |
各ファイルの読み込みを指定したらHTMLを記載します。スライダーで表示したい要素をyour content に置き換えます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
|
<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> |
最後にbody要素の終わりか別途scriptファイルでslickを起動させるコードを書きます。
|
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"/> |
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> |
各ファイルの読み込みを指定したらHTMLを記載します。スライダーで表示したい要素をyour content に置き換えます。
|
<div class="your-class"> <div>your content</div> <div>your content</div> <div>your content</div> </div> |
最後にbody要素の終わりか別途scriptファイルでslickを起動させるコードを書きます。
|
$(document).ready(function(){ $('.your-class').slick({ setting-name: setting-value }); }); |
このプラグインのおすすめポイント
- JQueryを触ったことがない人でも手軽に使える
- 各ブラウザや画面幅での動作が安定している
プラグイン③Fullscreen Slit Slider
数あるJqueryプラグインの中でも、Fullscreen Slit Sliderは特にアニメーション要素が強いプラグインです。
他のJqueryプラグインと同様にレスポンシブスライダーを実装可能な上に、カスタマイズすることでフルスクリーン対応もできます。
「インパクトのあるTOP画面にしたい!」
このような要望が来た場合に、まず最初に候補に上がるレスポンシブスライダーのプラグインです。
機能面が優れている半面、JQueryやJavascriptの知識が必要になるためこれらを勉強したことがある方におすすめです。
実装に必要なコード
slickは非常にシンプルなコードを記載するだけでレスポンシブスライダーを実装できます。
実装に必要な手順は以下の5点だけです。
からダウンロードが完了した後の手順をご紹介します。
まずは専用のcssファイルをHTMLに読み込ませます。
|
<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 に置き換えます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
|
<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> |
最後にbody要素の終わりか別途scriptファイルでslickを起動させるコードを書きます。
|
$(function() { $( '#sl-slider' ).slitslider(); }); |
このプラグインのおすすめポイント
- インパクトを与えるスライダーを作れる
- カスタマイズの幅が広い
まとめ
レスポンシブなスライダーを作る方法と、初心者の方にもおすすめできるJQueryプラグインを3つご紹介しました。
各デバイスに対応したレスポンシブなスライダーは、今やコーポレートサイトやECサイトだけではなく、さまざまな種類のWebサイトで使われています。
スライダーを1から作ることはカスタム性に長ける半面、どうしても時間のロスが発生します。特に初心者の方は苦戦することが多いでしょう。
正確さとスピードを求められがちなWeb制作では、必要に応じてプラグインを導入する必要があります。
今回ご紹介させていただいたJQueryプラグインは、レスポンシブなスライダーを作れるプラグインのほんの一部です。搭載したい機能なデザイン性など、さまざまな要素に対応できるプラグインはまだまだあります。
どのプラグインがいいか迷った時は、本記事で紹介した内容を参考にして見てください。
レスポンシブに対応した画像調整・サイズ切り替えの実装方法
画像をレスポンシブ対応させる方法を3つ紹介します。
レスポンシブデザインを制作するためのCSSサンプルコード集
レスポンシブデザインを実装する際に知っておいて損がないCSSの基礎知識を解説します。
最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。
この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします
minweb編集部(株)セルリア
”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。
タイトル・URLをコピー
記事タイトルレスポンシブでスライダーを実装する方法(HTML/CSS/jQuery)
記事URLhttps://digitor.jp/textbook/responsive-slider/
記事タイトルレスポンシブでスライダーを実装する方法(HTML/CSS/jQuery)
記事URLhttps://digitor.jp/textbook/responsive-slider/
こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料
Googleサーチコンソール使い倒し活用術 <AOHON>
Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。
サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。