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）まで幅広く対応
- 多彩なアニメーションで魅力的な演出が可能
- 公式サポートも充実しており学習コストも低い
