こんにちは、Ryohei(@ityryohei)です! 本記事では、Swiperで同一ページ内に複数のスライダーを設置する方法をご紹介しています。 同一ページ内に複数のスライダーを設置する、特にブログやECサイトを構築する際に求められるケースがあります。 ブログでは関連記事や人気の記事、おすすめの記事など。ECサイトは1画面に多くの情報を詰め込むことが多いため、複数の商品をスライダーに載せてオートプレイで流す方法は常套手段となっています。 ほとんどのスライダー系ライブラリは複数のスライダー表示に対応しています。もちろん「Swiper」も対応しています。 「Swiper」で同一ページ内に複数のスライダーを設置すると下記のような表示になります。 See the Pen Multiple Sliders ina page|Swiper by ryohei (@intotheprogram) on
![【Swiper】同一ページ内に複数のスライダーを設置する方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/2ae38bd97eb1ac7019328959847551dbefb87266/height=288;version=1;width=512/https%3A%2F%2Finto-the-program.com%2Fuploads%2Fswiper.png)