Swiper v6.3.4を使用しました。
https://swiperjs.com/
実現したいこと
- 左でいい感じにスナップしてほしい
- 幅はCSSで指定せず、中身によって変化するようにしたい
See the Pen Swiper Left justify / demo by YUU (@YUUMU) on CodePen.
少し説明
- 中身によってスライド幅を変更したいので、
slidesPerView: 'auto'に設定する -
slidesPerView: 'auto'を指定した場合、最後のスライドは右端揃えになってしまう - 最後のアイテムに右マージンがあれば左揃えになるので、
slidesOffsetAfterを指定する -
slidesPerView: 'auto'を指定した場合、最後のアイテムのactiveIndexが取れない仕様らしい（https://github.com/nolimits4web/swiper/issues/2571#issuecomment-380105061） -
snapGridとslidesGridを上手く使うとactiveIndexが取れるらしい（https://github.com/nolimits4web/swiper/issues/3108）
補足
-
width: fit-content;はIE対応してません - スライド幅が可変でなくていいなら、CSSで各スライドの
widthと最後のスライドのmargin-rightを指定すれば同様になります
使用例
See the Pen Swiper Left justify / sample by YUU (@YUUMU) on CodePen.