Swiperの解説記事をver.11対応にアップデートしました

1. Swiperとは1. Swiperとはスライダー（カルーセル）が作れるJavaScriptライブラリです。しかもPCでもスマホでも使えて、レスポンシブ対応可能！jQueryにも依存せず、カスタマイズの自由度も高く、見た目も美しいスライダーがサクッとできちゃう。マクドナルド、ディズニー、トヨタ、BMW、Adobeなど様々な有名企業に導入されています。でも、公式ドキュメントは英語のみ…。今回は、そんなSwiperについて解説していきます。 2. 使うための準備2. 使うための準備CDNからライブラリを読み込む方法が楽でおすすめ。下記のライブラリとスタ...

このページでは、Swiperの前・次スライドボタン、ページネーション、スクロールバーのカスタマイズ方法について解説します。Swiperとはなんぞやという方はこちらをご参照ください。 1. 前・次ページボタンのカスタマイズ1. 前・次ページボタンのカスタマイズ基本レイアウトはこう。Sample.1-1 Slide 1 Slide 2 Slide 3 Slide 4 const mySwiper11 = new Swiper('.sample11', { navigation: { nextEl: '.nextsample11', prevEl: '.prevsample11', }});HTML<!-- Swiper START --><div cl...

このページでは、Swiperを複数行で表示するカスタマイズ方法について解説します。Swiperとはなんぞやという方はこちらをご参照ください。 1. 列（縦方向）優先1. 列（縦方向）優先fill: 'column'を指定した時、またはfillを省略した時は、こういう並び順になります。Sample.1 Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6 Slide 7 Slide 8 Slide 9 Slide 10 Slide 11 Slide 12 const mySwiper1 = new Swiper('.sample1', { grid: { fill: 'column', rows: 2 }, slidesPerView: 3...