slickでのスライダーの実装方法と注意点

slickとは

導入方法

head

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>

<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>

footer

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>

<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<script type="text/javascript" src="slick/slick.min.js"></script>

head

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>

footer

<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

<div class="class-name">

    <div>1</div>

    <div>2</div>

    <div>3</div>

</div>

<script type="text/javascript">

    $(document).ready(function(){

      $('.class-name').slick({

        setting-name: setting-value

      });

    });

</script>

各種設定

実装例

1枚画像のスライダー

複数画像のスライダー

フェードで切り替わるスライダー

レスポンシブで枚数が可変するスライダー（横幅を変更して確認してください）

スライダーを実装する上での注意点

自動再生はPCのみに適用する

dots(現在地)を表示する

矢印は要素内に表示する

スライドの最大数を5枚以内に収める

スライダー領域の高さを予め確保する

lazyLoadを設定する

PCとSPの画像表示をCSSで出し分けをしない

まとめ

関連する記事

未経験の僕がWebデザイナーになった方法（独学編） 未経験の僕がWebデザイナーになった方法（職業訓練編） 【VSCode】フロントエンド開発時に便利なプラグイン HTML初学者集合！実は重要なhタグについて解説

• Tweet
•