Swiperとは？
Swiperは、モバイルに最適化されたモダンなスライダープラグインです。
スマートフォン対応はもちろん、WebアプリケーションやLPなど、あらゆる用途に適しています。
特徴
- タッチ操作・スワイプ対応
- レスポンシブ設計
- 自由度の高いレイアウト制御
- React, Vue, Svelteなど主要フレームワークに対応
- 軽量かつ拡張性の高い設計
Swiperの導入方法
1. CDNで導入
<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>2. npm/yarnで導入
npm install swiper基本構造と初期化
HTML構造
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">スライド1</div>
<div class="swiper-slide">スライド2</div>
<div class="swiper-slide">スライド3</div>
</div>
<!-- オプション要素（任意） -->
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>JavaScriptで初期化
const swiper = new Swiper('.swiper', {
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
});よく使うオプション一覧
| オプション名 | 説明 |
|---|---|
loop | スライドをループさせる |
autoplay | 自動再生 { delay: 3000 } |
speed | 切り替え速度（ms） |
spaceBetween | スライド間の余白（px） |
slidesPerView | 一度に表示するスライド数 |
pagination | ページネーション表示 |
navigation | 前後ボタン表示 |
direction | horizontal / vertical |
effect | slide / fade / cube / coverflow など |
breakpoints | レスポンシブ設定 |
keyboard | キーボード操作有効 |
mousewheel | マウスホイール対応 |
アニメーション効果のカスタマイズ
Swiperにはエフェクト切り替え機能があり、以下のように多彩なアニメーションが可能です。
1. フェード切り替え
effect: 'fade',
fadeEffect: {
crossFade: true
}2. カバーフロー（3D風）
effect: 'coverflow',
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: true
}3. キューブ型スライダー
effect: 'cube',
cubeEffect: {
shadow: true,
slideShadows: true,
shadowOffset: 20,
shadowScale: 0.94
}4. フリップ効果
effect: 'flip',
flipEffect: {
slideShadows: true,
limitRotation: true
}ReactでのSwiperの使い方
インストール
npm install swiper基本実装（React）
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/navigation';
import { Navigation } from 'swiper/modules';
const App = () => (
<Swiper
modules={[Navigation]}
navigation
loop
slidesPerView={1}
spaceBetween={30}
>
<SwiperSlide>スライド1</SwiperSlide>
<SwiperSlide>スライド2</SwiperSlide>
<SwiperSlide>スライド3</SwiperSlide>
</Swiper>
);
export default App;サムネイル連携（React）
const [thumbsSwiper, setThumbsSwiper] = useState(null);
return (
<>
<Swiper
modules={[Thumbs]}
thumbs={{ swiper: thumbsSwiper }}
>
<SwiperSlide>メイン1</SwiperSlide>
<SwiperSlide>メイン2</SwiperSlide>
</Swiper>
<Swiper
modules={[Thumbs]}
onSwiper={setThumbsSwiper}
slidesPerView={4}
watchSlidesProgress
>
<SwiperSlide>サムネ1</SwiperSlide>
<SwiperSlide>サムネ2</SwiperSlide>
</Swiper>
</>
);VueでのSwiperの使い方（Vue 3）
インストール
npm install swiper基本実装（Vue3）
<template>
<Swiper
:modules="[Navigation]"
:navigation="true"
:loop="true"
:slidesPerView="1"
>
<SwiperSlide>スライド1</SwiperSlide>
<SwiperSlide>スライド2</SwiperSlide>
</Swiper>
</template>
<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/navigation';
import { Navigation } from 'swiper/modules';
</script>自動再生＋レスポンシブ（Vue3）
<Swiper
:modules="[Autoplay]"
:autoplay="{ delay: 3000 }"
:breakpoints="{
640: { slidesPerView: 2 },
1024: { slidesPerView: 3 }
}"
>
<SwiperSlide>スライド1</SwiperSlide>
<SwiperSlide>スライド2</SwiperSlide>
</Swiper>まとめ
Swiperは、シンプルなスライダーから複雑なUIコンポーネントまで幅広く対応可能な最強スライダープラグインです。
- 静的HTMLからSPA（React/Vue）まで幅広く対応
- 多彩なアニメーションで魅力的な演出が可能
- 公式サポートも充実しており学習コストも低い
