【追記要確認】[js]Slick.js 1.8 + PhotoSwipe v5はNG

ダメだというのがわかればいい。

20241031追記：なんとかなりそう

slick.jsにlightbox2を仕込んでも倍になった。
原因はslick.jsがスライド数を倍にしてる（複製してる）から。

同じのが増えてるからそりゃ倍になるよねと。
動作のためにそうなってるので、増やすこと自体を止めることはできない。
そうしたかったらやっぱりslick.jsを諦めようということになる。

一応、複製したやつを分けられるのでその部分だけメモ。

slick.js+lightbox2だとこうなる。

$(window).on('load', function () {
     $('.slick-cloned a').removeAttr('data-lightbox');
});

ということは、こんな感じでいいんじゃないのか。

const lightbox = new PhotoSwipeLightbox({
  gallery              :'#js-gallely',
  children             : '.slick-slide a',
  ⋮
});

試してないけどこんな感じでchildrenを絞り込めたら勝ちよねこれ。

画像のスライドショーがあって、クリックしたら画像が拡大するようにしたい。

スライドショーは複数設置してあって、拡大表示した画像も拡大のままスライドしたら便利ね。

人気のあるSlick.jsと、地味に人気のあるPhotoSwipeを混ぜたらどうなるのか。

スライドショーのjsはいくつもあって、いろんな組み方がされてる。

slick.jsはスライドの中身を2つに増やす効果がある。多分無限ループのための仕組み。

検証上では増えてないっぽいけど増えてる。そんな感じ。

で、増えた分もPhotoSwipeが拾ってしまう。そうするとギャラリーの総数が倍になる。

並びは正常なので総数と現在位置のところを非表示にすれば問題ないけど、いまどこを見てるかが分からなくなるのは親切でないのでよろしくない。

slickが癌になってるんで、スライドは変更するのがマスト。PhotoSwipeは据え置き。

Swiper.jsを使えばいい。こっちも非jQueryだし、なんか嬉しい組み合わせですね。

以前書いた記事ではslickとphotoswipeを組み合わせてた。別段違和感はなかったんだけども。

あれからバージョンが変わったんで、それでなんやかやが起きたのかもしれない。

もしかしたら自分の組み方が悪いだけかもしれない。

そうだったらごめんなさい。