現在の画像が表示対象になっているかを監視するオプションを追加し、特殊なクラスを使ってスタイルを変更していきます。
- 上と左右の余白を削除する（body、margin）
- 現在どの画像が表示対象になっているかを監視してくれるオプションを追加する（watchSlidesProgress）
- 特殊なクラスを使ってスタイルを設定する（.swiper-slide-visible、opacity）
- :not()を使った擬似クラスの指定方法を利用する（.swiper-slide:not(.swiper-slide-visible)）
素材ファイルをダウンロードするにはプレミアムプランへの登録が必要です
詳しくみるソースコードを閲覧するにはプレミアムプランへの登録が必要です
詳しくみるデモを閲覧するにはプレミアムプランへの登録が必要です
詳しくみる