【Swiper】スライドアニメーションで切り替わる基本のスライダー

Swiperを使用した、スライドアニメーションで切り替わるスライダーです。
アレンジしやすい基本のサンプルになっています。

フェードで切り替わるタイプのサンプルについてもまとめてあります。

目次

オート

See the Pen swiper-slider-auto by maonyan516 (@maonyan516) on CodePen.

▼ アクティブスライドが中央にくるタイプ

See the Pen Untitled by maonyan516 (@maonyan516) on CodePen.

ボタンで切り替え

確認しやすさのために、autoplayは設定していません

ナビゲーションボタンで切り替え

See the Pen swiper-slider-nav by maonyan516 (@maonyan516) on CodePen.

ページネーションで切り替え

See the Pen swiper-slider-auto02 by maonyan516 (@maonyan516) on CodePen.

マウスで切り替え

See the Pen swiper-slider-mouse by maonyan516 (@maonyan516) on CodePen.

シェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

九大工学部卒、デコ日記はみっちり派のもちゃんです。今はWeb制作の会社に勤務しています。
2025お仕事手帳はSUNNY手帳を愛用中。

コメントする

目次