前提
- Swiper 11 系を使用
- （以下は関係ないかもしれないが一応記載）
- Astro 3 系
- Tailwind CSS 3 系
結論
Swiper のイージングが変わらないときは .swiper-slide にCSSを書くと変わる（かもしれない）。
.swiper-wrapper ではなく .swiper-slide に。
サンプルを書くほどでもないCSS
.swiper-slide {
transition-timing-function: cubic-bezier(1,0,0,1);
}
気づいた経緯
Swiper で実装したスライドショーに対して「イージング調整できませんか？」という依頼を受けた。
調べると「 .swiper-wrapper にCSSを書いてね」という情報が多くヒットした。
公式のIssueにも残っている。
このIssueは2013年だが、2021年にも「イージングのオプションを追加してほしい」というIssueが立っていた。
「CSS の transition-timing-function で簡単に変更できますよ」という回答でクローズされている。
初期設定のCSSを見たら、確かに .swiper-wrapper に transition-timing-function のCSSが適用されている。
簡単でよかった〜と思いCSSを追加したが、変わらない。
わかりやすいように秒数を増やしてみたり、バウンドするぐらい極端なイージング曲線にしてみたり、もろもろ試したが変わらない。
なんで？バージョンアップで調整不可になったとか？と焦りつつ、各セレクタのCSSを見直してみた。
そうしたら、 .swiper-slide にも transition-timing-function のCSSが適用されていた。
もしかして？と思い、CSSを追加した。
あっさり変わった。
わかっていないこと
- これだけ有名なライブラリなのに、
.swiper-slideにCSSを足してイージングを調整するという記事がパッとは見つからなかった- そんなことあるか？
- （自分のプロジェクトだけがバグっていた可能性も大いにある）
- この方法でイージングを調整した場合、
.swiper-wrapperに適用されているtransition-timing-functionは何の役割があるのだろうか