カルーセルを複製し、2つ目のswiperを逆方向に流す方法を説明します。
- カルーセルを複製する
- カルーセルの高さの調整をする(hegiht)
- それぞれのカルーセルに独自のクラス属性をつける(swiper1、swiper2)
- JavaScriptでSwiperのコードを複製、swiper1とswiper2を設定する
- 2つ目のswiperに逆方向に流れるオプションを追加する(autoplay: {reverseDirection: true})
素材ファイルをダウンロードするにはプレミアムプランへの登録が必要です
詳しくみるソースコードを閲覧するにはプレミアムプランへの登録が必要です
詳しくみるデモを閲覧するにはプレミアムプランへの登録が必要です
詳しくみる