itswiper.jsのエフェクトオプションを使用して当記事アイキャッチのようなカバーフロースライダーを作成する方法を記します。coverflowEffectで細かい調整を行う方法についても説明します。通常のSwiper.jsでのスライダーの作成はご存じの前提で進めさせていただきますので、Swiper.jsを初めて使う方はこちらから先に参考いただければと思います。Swiper.jsでスライダーを実装する目次1通常のSwiperスライダーを作成2スライドを複数枚表示にする3coverflowエフェクトを適用する4coverflowEffectオプションで細かい調整を行うソースコード全文1通常のSwiperスライダーを作成わかりやすいように、最初に通常のSwiperスライダーを作成して、そこから変更を加えていきます。})</script>通常のSwiperスライダーができました。2スライドを複数枚表示にするslidesPerViewでオプションでスライドを複数枚表示にできます。centeredSlidesオプションをtrueに1枚目のスライドを真ん中に持ってきましょう。“coverflow”を指定すると、coverflowEffectオプションで細かい調整を行うことができます。coverflowEffect指に指定できるオプションは以下になります。前後のスライド表面の影の有無coverflowEffectオプションを使用した例を一つ見てみましょう。},})回転をなくし、奥行を大きく、スライド間のスペースを縮めています。(stretchオプションはスライドの幅のサイズより小さい値を指定すると、スライド間の幅が縮みます)。最後にソースコードを全文載せておきます。})</script>以上、swiper.jsを使用してカバーフロースライダーを作成する方法でした。effectオプションを使用して作成できるスライダーは他にも下記のようなものがあります。*次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。