Swiper.js 設定項目 早見表【日本語】

slidesPerView

1

同時に表示するスライド数。数値または 'auto'

spaceBetween

0

スライド間の余白（px）

loop

false

ループ（無限スクロール）を有効化

speed

300

スライド切り替えのトランジション時間（ms）

direction

'horizontal'

'horizontal' または 'vertical'

effect

'slide'

切り替え演出。slide / fade / cube / coverflow / flip / creative / cards

centeredSlides

false

アクティブなスライドを中央寄せ表示

breakpoints

-

画面幅ごとに設定を切り替え（レスポンシブ対応）

grid.rows

-

複数行のグリッド表示（Grid モジュール）

navigation.nextEl

null

「次へ」ボタンの要素・CSSセレクタ

navigation.prevEl

null

「前へ」ボタンの要素・CSSセレクタ

navigation.hideOnClick

false

スライダークリックでボタン表示を切り替え

navigation.disabledClass

swiper-button-disabled

無効時に付与されるクラス名

pagination.type

'bullets'

'bullets' / 'fraction' / 'progressbar' / 'custom'

pagination.clickable

false

true でバレット（丸印）クリックによる遷移が可能

pagination.dynamicBullets

false

スライド数が多いとき、表示バレット数を絞る

pagination.dynamicMainBullets

1

dynamicBullets 有効時のメインバレット数

pagination.el

null

ページネーションを設置するコンテナ

autoplay.delay

3000

次のスライドまでの待機時間（ms）

autoplay.disableOnInteraction

true

false にするとユーザー操作後も自動再生を再開

autoplay.pauseOnMouseEnter

false

マウスホバー時に一時停止

autoplay.stopOnLastSlide

false

最終スライドで自動再生を停止（loop時は無効）

autoplay.reverseDirection

false

逆方向に自動再生

autoplay.waitForTransition

true

トランジション完了を待ってから次へ進む

fade

fadeEffect.crossFade

coverflow

coverflowEffect.rotate / depth / stretch / modifier

cube

cubeEffect.shadow / slideShadows

flip

flipEffect.slideShadows

cards

cardsEffect.perSlideRotate / rotate

creative

creativeEffect.prev / next（自由なアニメーション定義）