javascriptをレスポンシブで切り替え

たとえばスライダーをPCでは左右ちょいみせ
スマホでは1枚スライダーとか

if (window.matchMedia('(max-width: 800px)').matches) {
$('.slider').slick({
pauseOnHover: false,
pauseOnFocus: false,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
dots: true,
arrows: false,
swipe: true,
});
} else if (window.matchMedia('(min-width:801px)').matches) {
$('.slider').slick({
pauseOnHover: false,
pauseOnFocus: false,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
dots: true,
arrows: false,
swipe: true,
centerMode: true,
centerPadding: '25%',
});
}

if (window.matchMedia('(max-width: 767px)').matches) {
    //スマホ処理
} else if (window.matchMedia('(min-width:768px)').matches) {
    //PC処理
}

勉強させて貰ったサイト

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です