Swiper– tag –
-
【Swiper】スライド総数と現在のスライド番号を表示する方法
スライダーを作成できるJSプラグイン「Swiper」で、以下のようなスライダーを作成する方法を紹介します。 スライド総数を表示現在表示中のスライド番号を表示 DEMOと実... -
【Swiper】スライドを左右にはみ出させる＆中央のスライドを大きくする方法
今回はSwiperのカスタマイズ方法として、以下のようなスライダーを作成する方法を紹介します。 スライドを1度に3枚表示する中央のスライドは大きく、左右のスライドは少... -
【Swiper】一定速度で横に流れ続ける無限ループスライドショーを実装する方法
高機能なスライダーを実装できるJSライブラリ「Swiper」を使用して、以下のような機能のスライドショーを作成していきます。 一定速度で横方向にゆっくり流れる1枚ずつ... -
素のJSとSwiperでモーダル内にスライダーを表示する方法
今回の記事では、モーダルとスライダーを組み合わせて使用する方法を紹介していきます。 ページ上のボタンをクリックするとモーダルが開き、その中にスライダーを設置す... -
【Swiper】サムネイル付きの画像スライダーを実装する方法
Swiperとは、スライダー（カルーセル）を簡単に作成できるJSライブラリです。 jQueryなどのフレームワークに依存せず、また用意されているオプションを指定するだけで高... -
【Swiper】全画面の垂直スライダーに水平スライダーを埋め込む方法【カスタマイズ】
『画面いっぱいに広がる垂直スライダーの中に、全画面の水平スライダーを埋め込むスライド式のサイト』をSwiperで実装する機会がありました。 まとめると以下のようなサ... -
【Swiper】タッチパッドやマウスホイールでスライドを移動させる方法
Swiperでスライダーを作成していると、以下のような悩みに直面した方もいるかと思います。 マウスホイールや、タッチパッドのスワイプでもスライド移動させたい… Swiper... -
【Swiper】縦スライド可能な全画面ページを実装する方法
縦スクロールで画面いっぱいのスライドを切り替える縦長ページを作成する機会があったので、実装方法を紹介しようと思います。 有名なプラグインだとfullPage.jsがあり...
1