ダメだというのがわかればいい。
構築イメージ
画像のスライドショーがあって、クリックしたら画像が拡大するようにしたい。
スライドショーは複数設置してあって、拡大表示した画像も拡大のままスライドしたら便利ね。
人気のあるSlick.jsと、地味に人気のあるPhotoSwipeを混ぜたらどうなるのか。
slick - the last carousel you'll ever need
slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping ...
kenwheeler.github.io
PhotoSwipe
Open-source JavaScript image gallery and lightbox.
photoswipe.com
バグはないけど不都合が起きる
スライドショーのjsはいくつもあって、いろんな組み方がされてる。
slick.jsはスライドの中身を2つに増やす効果がある。多分無限ループのための仕組み。
検証上では増えてないっぽいけど増えてる。そんな感じ。
で、増えた分もPhotoSwipeが拾ってしまう。そうするとギャラリーの総数が倍になる。
並びは正常なので総数と現在位置のところを非表示にすれば問題ないけど、いまどこを見てるかが分からなくなるのは親切でないのでよろしくない。
代案
slickが癌になってるんで、スライドは変更するのがマスト。PhotoSwipeは据え置き。
Swiper.jsを使えばいい。こっちも非jQueryだし、なんか嬉しい組み合わせですね。
Swiper - The Most Modern Mobile Touch Slider
Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.
swiperjs.com
こんなはずではなかった
以前書いた記事ではslickとphotoswipeを組み合わせてた。別段違和感はなかったんだけども。
あれからバージョンが変わったんで、それでなんやかやが起きたのかもしれない。
もしかしたら自分の組み方が悪いだけかもしれない。
そうだったらごめんなさい。
コメント