【徹底解説】5歳でも分かる、スライドショーの作り方

ABOUTこの記事をかいた人

フロントエンドエンジニア。

こんにちは。今回はスライドショーの作り方を徹底的に解説していきます。Swiper.jsというライブラリを用いて作っていきます。

この記事は僕が書いている5歳でも分かるシリーズの1つです。他にもハンバーガーメニューやタブメニューなどの作り方も載っていますのでぜひご覧ください。

5歳でも分かる、JavaScriptをどこまで学べば良いかの学習ロードマップ

2021年10月20日

作るものの確認

今回作るのは、このようなスライドショーです。ボタンや下部のページネーションを示すアイコン群もオリジナルなものにカスタマイズしていきます。

コードは以下のものになりますので、何か困ったことが起きたらここのコードと見比べてみてください。(コピペでも使えます)

index.html
style.css

実装

準備

コードを書き始める前に、ディレクトリ構成の確認とリセットCSSの導入です。

├── index.html
└── resources
    ├── images
    └── styles
        ├── destyle.css
        └── style.css

上記の形でファイルを配置しましょう。画像は後ほど入れるのでimagesフォルダは空で大丈夫です。

destyle.cssというのがリセットCSSで、詳細な説明は省きますが各種タグに初期で当たっている様々な余計なスタイルを打ち消してくれるものです。

今回はこちら(https://github.com/nicolas-cusan/destyle.css/blob/master/destyle.css)のものを利用します。こちらのコードをそのままコピーしてdestyle.cssとして上記の場所に配置します。

destyle.css

Swiper.jsを導入する

それではSwiper.jsを導入します。公式サイトのGetting Started(https://swiperjs.com/get-started)からHTMLのテンプレートとSwiper側で用意しているスタイルシート、そしてCDNで読み込むscript部分を導入します。

headタグ内では、destyle.css、Swiperのスタイルシート、style.cssの順番で読み込みます。これは、基本的にcssは後から読み込まれたものが優先されるからです。最初に余計なスタイルを消し、Swiperデフォルトのスタイルを読み込んでから最後にオリジナルのスタイルを適用させるということです。

そして、Swiperを起動するためのコードを先ほど読み込んだscriptタグのさらに下に追加します。こちらも公式に書かれていますが、そのままでは使いにくいのでdirectionの設定とscrollbarの設定を省いています。

それでは、次の節で見た目を整えましょう。

スライドショーへ画像を挿入する

スライドショーに画像を入れていきます。何の画像でも良いですが、今回はillustACさんからお借りしました。

PCの画像

タブレットの画像

スマホの画像

これらの画像をimagesフォルダの中にそれぞれpc.png、tab.png、sp.pngという名前で配置します。

続いてこれらを入れて、見た目を整えていきます。

画像のスタイルがやや特殊ですが、こうすると親要素のサイズによらず画像がはみ出なくなります。object-fitはbackground-sizeに似た挙動をし、同様にcontainやcoverのキーワードを用いることができます。object-fitについてはこちら(https://developer.mozilla.org/ja/docs/Web/CSS/object-fit)。

これで最低限のスライドショーが完成しました。

カスタマイズする

Swiper.jsに追加の設定をしてみる

Swiperには設定可能な項目がたくさんあります。どんな設定項目があるかは、公式のこちらのページ(https://swiperjs.com/swiper-api)に書かれています。

ここでは代表的なものを使って設定を変えてみましょう。

spaceBetweenに数値を設定すると、その幅のmarginが作られます。そしてslidesPerViewに数値を設定するとその枚数分が1画面内に出現します。

また、slidesPerViewが偶数の時は画面を半分づつ埋める形になりますが、centeredSlides: trueを指定すれば中央揃えになります。

さらに、slidesPerViewは整数以外の値も設定でき、今回のサンプルでは1.5にしています。

他にもautoplayという設定をすれば自動でスライドが切り替わったり、他にもさまざまな項目があるのでぜひ試してみてください。

オリジナルのボタン、ページネーションアイコンを作る

さて、最後にページ送りのボタンなどをオリジナルのものに差し替えていきましょう。

まずはボタンです。ボタンは最初のテンプレートでいうところの.swiper-button-prev(戻るボタン)と.swiper-button-next(進むボタン)です。これらにSwiperがデフォルトで指定しているスタイルを効かないようにするため、クラス名の後ろに__originをつけて変更します。

そうしたら、scriptの方でもこのクラス名に変更します。

こうすると一旦ボタンが見えなくなっていると思います。

ここに違うアイコンを入れてみましょう。アイコンはICOON MONOさんからお借りしました。それぞれをSVG形式でダウンロードしてください。

左矢印

右矢印

ダウンロードできたらそれぞれarrow_left.svg、arrow_right.svgと言う名前でimagesフォルダに配置します。

次に、画像をボタンの中に配置します。

続いてスタイルです。

まずは見える状態にします。

こうすると、画面左上に2つの矢印が重なって見えるかと思います。

このボタンをそれぞれ、縦方向には中央に配置し左端、右端に設置します。

このように、topとbottomをそれぞれ0にした上でmargin-top/bottomをそれぞれautoにすると縦方向の中央に配置されます。(今回はしていませんが横方向も同様で、left/rightを0にした上でmargin-left/rightをautoにすると中央に配置されます。)

これでオリジナルのボタンを作ることができました。

次は下部のページネーションアイコンです。この要素をデベロッパーツールで見てみると、.swiper-pagination-bulletというクラスが付いていて、さらにアクティブなものには.swiper-pagination-bullet-activeが付いています。

これらはSwiper.jsがJavaScriptから生成している要素なので、このクラス名に対してスタイルを上書きする形で見た目を変えていきます。

円形はborder-radiusで実現されているので、それを打ち消します。そしてサイズを整えます。アクティブ状態の色はbackground-colorで実現されているので、それを別の色で上書きます。

これで完成です!

まとめ

というわけでスライドショーの作り方をなるべく細かく説明しました。世の中に公開されているライブラリには今回使ったSwiper.jsのようなものがいくつかあります。無闇やたらに使うとかえって複雑になるのでお勧めしませんが、数を絞って上手に使っていきましょう。

5歳でも分かる、JavaScriptをどこまで学べば良いかの学習ロードマップ

2021年10月20日

5歳でも分かる、JavaScriptをどこまで学べば良いかの学習ロードマップ

2021年10月20日

【徹底解説】5歳でも分かる、アコーディオンメニューの作り方(jQuery編)

2021年10月20日

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください