「slick」でブラウザ幅がPCの場合はスライダーを表示し、スマホ幅の場合はスライダー無しにする方法

slickプラグインで画像スライダーを設置しているページがあり、PCのブラウザ幅の場合はスライダー有りのまま、スマホのブラウザ幅の場合はスライダーを無くして画像をそのまま表示させたいということがあった。以前にメモしたmatchMediaでいけるんじゃないかと思い試してみたところ実装できた。サンプルと実装方法をメモ。

サンプル

https://taitan916.info/sample/slick/display_change/

slick

公式サイト

https://kenwheeler.github.io/slick/

CDN

CDNで使う場合は以下を記述する。

<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css">

実装方法

ソースコード

PC / スマホはbreakpointの値によって判別されるので適宜調整すること。

<style>
#slider{
    width: 1200px;
    margin: 0 auto;
}
</style>

<div id="slider">
    <div><img src="./img/001.jpg"></div>
    <div><img src="./img/002.jpg"></div>
    <div><img src="./img/003.jpg"></div>
    <div><img src="./img/004.jpg"></div>
    <div><img src="./img/005.jpg"></div>
</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css">
<script>
$(function(){

    var breakpoint = 800;
    const limit = window.matchMedia(`(max-width: ${breakpoint}px)`);
    limit.addEventListener(`change`, slider);
    slider();

    function slider(){
        if( $(window).width() > breakpoint ){
            $(`#slider`).slick({
                infinite: true,
                slidesToShow: 3,
                slidesToScroll: 3,
                arrows: true, 
            });
        }else{
            $('#slider.slick-initialized').slick('unslick');
        }
    }
});
</script>