【jQuery】slick とLightboxを併用時の注意点

※ 当サイトではアフィリエイト広告を利用しています。

jQueryのプラグイン、slickとLightbox2を同時に使った場合、ライトボックス表示時にファイルの枚数が2枚多く出てしまう…というときの対処法です。

これはスライダーが、スムーズな回転のために前後にクローンを作り出すため。
ライトボックス側ではこの前後のクローンの枚数もカウントしてしまうため、2枚多く出力されるということ。

slickではクローンに対してslick-clonedというクラスを振るので、そのクラスを基にしてグループ分けしているrel属性を削除。

コードは以下です。

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

これで正常な枚数が表示されるようになりました！