Webサイトにスライド表示を簡単に導入できる「Swiper」は、多くのサイトで採用されている人気のライブラリです。豊富なカスタマイズ機能と高い操作性を備えており、JavaScriptに慣れていない方でも簡単に導入できるのが魅力です。本記事では、Swiperの基本的な使い方から実装のポイントまで分かりやすくご紹介します。
完成デモの紹介
まずはデモをご覧ください。
See the Pen Swiper by はなはな氏 (@wxftomuu-the-selector) on CodePen.
ソースコードについて
HTML
まずは、Swiperを使うための最小構成となるHTMLをご紹介します。CDNからライブラリを読み込み、スライドとなる要素を並べるだけで、簡単にカルーセルを表示することができます。ナビゲーションボタンやページネーションも標準で用意されているため、初心者でも直感的に導入することができます。
<!-- SwiperのCSSを読み込み（CDN） -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>
<!-- SwiperのJavaScriptを読み込み（CDN） -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<h3>Swiperの使い方</h3>
<div class="container">
<div class="inner">
<!-- Swiperのメイン要素 -->
<div class="swiper">
<!-- スライダーのラッパー。必ずこの中にスライドを配置する -->
<div class="swiper-wrapper">
<!-- 各スライド -->
<a class="swiper-slide"><div class="slide">Slide 1</div></a>
<a class="swiper-slide"><div class="slide">Slide 2</div></a>
<a class="swiper-slide"><div class="slide">Slide 3</div></a>
<a class="swiper-slide"><div class="slide">Slide 4</div></a>
<a class="swiper-slide"><div class="slide">Slide 5</div></a>
<a class="swiper-slide"><div class="slide">Slide 6</div></a>
<a class="swiper-slide"><div class="slide">Slide 7</div></a>
<a class="swiper-slide"><div class="slide">Slide 8</div></a>
<a class="swiper-slide"><div class="slide">Slide 9</div></a>
<a class="swiper-slide"><div class="slide">Slide 10</div></a>
</div>
<!-- 前へ / 次へ ボタン（任意） -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- ページネーション（任意） -->
<div class="swiper-pagination"></div>
</div>
</div>
</div>
CSS
続いて、Swiperにデザインを適用するためのCSSをご紹介します。デフォルト状態でも表示は可能ですが、スタイルを整えることでスライダー全体の印象が大きく向上し、コンテンツの訴求力も高まります。今回のサンプルでは、カルーセルのレイアウト調整に加え、ホバー時のアニメーションやページネーションといった細かな部分もカスタマイズしています。
なお、スライドにスタイルを適用する際は、.swiper-slide に直接スタイルをあてるのではなく、本例の .slide のように中身を包む要素を用意し、その要素に対してデザインを適用するのがおすすめです。
/* コンテンツスタイル
-------------------------*/
:root {
--transition: 0.8s cubic-bezier(.2, 1, .2, 1);
}
body {
background: #1a8093;
}
h3 {
text-align: center;
color: #fff;
}
/* Swiperスタイル
-------------------------*/
.container {
/* スライダー外の要素がはみ出さないように隠す */
overflow: hidden;
}
.container {
/* Swiperのカスタムプロパティ（テーマカラー・ボタンサイズなど） */
--swiper-theme-color: #fff;
--swiper-pagination-color: #FFD900;
--swiper-navigation-size: 4rem;
--swiper-pagination-bottom: -40px;
--swiper-pagination-bullet-width: 1.6rem;
--swiper-pagination-bullet-height: 3px;
--swiper-pagination-bullet-border-radius: 0;
--swiper-pagination-bullet-inactive-color: #ccc;
--swiper-navigation-sides-offset: -2.0rem;
}
.container .inner {
position: relative;
max-width: 1200px;
margin: 0 auto;
padding: 30px 4rem 50px;
}
.container .swiper {
overflow: visible;
}
.swiper .swiper-slide .slide {
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
border-radius: 10px;
box-sizing: border-box;
box-shadow: .8rem .8rem 1.2rem rgba(0, 0, 0, .05);
aspect-ratio: 1/1;
cursor: pointer;
transition: var(--transition);
}
.swiper .swiper-slide .slide:hover {
transform: translateY(-16px);
box-shadow: 1rem 1rem 1.5rem rgba(0, 0, 0, .08);
}
/* 画面外にあるスライドは少し薄く表示し、クリック不可にする */
.swiper-slide:not(.swiper-slide-visible) .slide {
pointer-events: none;
opacity: .3;
}
.swiper-pagination-bullet {
transition: var(--transition);
}
.container .swiper .swiper-pagination-bullet-active {
width: 3.2rem;
}
.swiper-button-prev::before, .swiper-button-next::before {
position: absolute;
content: '';
width: var(--swiper-navigation-size);
height: var(--swiper-navigation-size);
background-color: rgb(0, 0, 0, .3);
border-radius: 50%;
transition: var(--transition);
z-index: 1;
}
.container .swiper .swiper-button-prev:after,
.container .swiper .swiper-button-next:after {
font-size: 1.2rem;
font-weight: bold;
z-index: 2;
}
.swiper-button-prev:hover:before, .swiper-button-next:hover:before {
transform: scale(1.2);
}
/* モバイル用スタイル
-------------------------*/
@media (max-width: 600px) {
.container {
--swiper-pagination-bottom: -50px;
}
.container .swiper .swiper-pagination {
text-align: left;
}
}
JS
最後に、Swiperを動かすための初期化用JavaScriptを設定します。対象となる.swiper要素に対して new Swiper() を実行し、表示枚数やループ、オートプレイ、ブレイクポイントなど各種オプションを指定することで、好みの動きを簡単に実現できます。
// Swiper
// ----------------------------------
const mySwiper = new Swiper('.swiper', {
// 画面に表示するスライド数
slidesPerView: 1,
// 初期表示するスライド（最後のスライドを左端に見切れさせた状態からスタート）
initialSlide: document.querySelectorAll('.swiper-slide').length,
// スライド間の余白（px）
spaceBetween: 16,
// スライドをループさせる
loop: true,
// ループを滑らかにするために追加するダミースライドの数
loopAdditionalSlides: 1,
// スライドアニメーションの速度（ms）
speed: 1000,
// スライドの表示状態を監視（フェード・opacity制御などに使用）
watchSlidesProgress: true,
// 自動再生の設定
autoplay: {
delay: 4000, // 切り替え間隔
disableOnInteraction: false // ユーザー操作後も自動再生を継続
},
// ページネーションの設定
pagination: {
el: '.swiper-pagination',
clickable: true, // クリックで任意のスライドに移動
},
// ナビゲーションボタンの設定
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 画面幅に応じたレイアウト変更（レスポンシブ対応）
breakpoints: {
600: {
slidesPerView: 2, // 幅600px以上で2枚表示
},
1025: {
slidesPerView: 4, // 幅1025px以上で4枚表示
spaceBetween: 32, // 余白も拡大
}
},
});
まとめ
以上のように、SwiperはシンプルなHTMLとわずかなJavaScriptだけで高機能なスライダーを実装できる非常に便利なライブラリです。今回ご紹介した内容はあくまで基本的なカスタマイズの一例であり、その他にも多彩なパラメーターが用意されているため、サイトの雰囲気に合わせた柔軟なデザインが可能です。また、レスポンシブ対応にも優れているため、PC・スマートフォン問わず快適な操作性を提供できます。
さらに詳しい情報については、開発元であるSwiper公式ページをご覧ください。このような素晴らしいライブラリを開発・公開してくださった関係者の皆様に、心より感謝申し上げます。
なお、弊社では「サイトの更新まで手が回らない…」という方向けに、更新作業の代行や技術的なサポートも承っております。「同じように実装したけれどうまく動かない」などお困りの際は、お気軽にご相談ください。
少しでもこの記事がお役に立てれば幸いです。最後までお読みいただき、ありがとうございました。
