パソ君
・slickを使ってたら「Cannot read property ‘unslick’ of undefined」ってエラー出たよ？
こんな疑問にお答えします。
slickにてスマホ時のみ実装、PC時は無効化しようとすると「Cannot read property ‘unslick’ of undefined」というエラーがでちゃいます。
これ実はコードを修正すれば解決可能です。
ジト
すぐにできるよ！
ということで、この記事ではslickの「Cannot read property ‘unslick’ of undefined」エラーを解決について解説していきます！
この記事でわかること
slickの「Cannot read property ‘unslick’ of undefined」エラーを解決
目次
slickの「Cannot read property ‘unslick’ of undefined」エラーが出る
slickを使うときにPCもしくはスマホ時に無効化させる実装をすると、「Cannot read property ‘unslick’ of undefined」というエラーがでてしまいます。
例として下記コードですね↓
$(function () {
checkWindowSize();
$(window).resize(function () {
checkWindowSize();
});
function checkWindowSize() {
var windowWidth = $(window).width();
if (windowWidth < 768) {
$(".test-slick").slick({
arrows: false,
autoplay: true,
});
} else {
$(".test-slick").slick('unslick');
}
}
});横幅768px以上のときに無効化してるのですが、無効化中にコンソールを見るとエラーがでてしまいます。
ジト
ただ、たまにエラーが出なかったりするのでちょっと謎。。
【対策】slickの「Cannot read property ‘unslick’ of undefined」エラーを解決
対策方法としては「slick-initialized」というクラスを使うことです。
そんなコードがこちら↓
$(function () {
checkWindowSize();
$(window).resize(function () {
checkWindowSize();
});
function checkWindowSize() {
var windowWidth = $(window).width();
if (windowWidth < 768) {
$(".test-slick").not('.slick-initialized').slick({
arrows: false,
autoplay: true,
});
} else {
$(".test-slick.slick-initialized").slick('unslick');
}
}
});下記部分に「slick-initialized」を入れて記述したら、エラーが解消されました。
// 有効化するとき
$(".test-slick").not('.slick-initialized').slick({
});// 無効化するとき
$(".test-slick.slick-initialized").slick('unslick');参考になれば幸いです。
【対策】slickの「Cannot read property ‘unslick’ of undefined」エラーを解決：まとめ
- PCもしくはスマホ時に無効化するとコンソールにエラーがでる
- 対策は「slick-initialized」というクラスを使うこと
ジト
slickにてエラーがでた時はためしてみてね！
