底辺ITエンジニアの日常

slick.jsの実装中に「Uncaught TypeError: Cannot read property 'add' of null」というエラーが出たので、備忘録として。。。

多くの場合、下記のように記載して問題ありませんが、たまに「Uncaught TypeError: Cannot read property 'add' of null」というエラーが出てしまうみたいです。

$('.slide').slick({
    slidesToShow: 2,
});

「Uncaught TypeError: Cannot read property 'add' of null」が出た場合は以下のように記載します。

$('.slide').not('.slick-initialized').slick({
    slidesToShow: 2,
});

私の場合、上記のようなエラーが出たページはslickを別々に二つ使用しており、どうやら別クラスにて複数呼び出すとこのようなエラーが出てしまう模様です。

詳しくはわかりませんが、一回実行したら.slick-initializedがついてしまい、ない状態の記載を加えてあげることで問題なく実行できるのかな・・・？

ちなみに、slickには様々なオプションがありますが、swiperのfreemodeやcssのoverflow: autoのような滑らかな動作はslickでは再現できないみたいですので、slickとswiperの使い分けが必要みたいです。

参考にしたページ↓
https://www.proglad.tokyo/2017/08/slickjs-uncaught-typeerror-cannot-read.html

当ブログスポンサー広告一覧