js/web

slick sliderの使い方 [1]

Posted on by cogumo

授業で質問されることが多いのがヒーローイメージに使うスライダーのこと。

ヒーローイメージ：webのファーストビューでバババーンと飛び込んでくる大きな画像ね！
（私は最近までメインビジュアルと言ってたんだけど。。。こういうみたい）

話は早速それましたが、いろんなスライダーを使って来ました。少し前までは「bxslider.js」を使っていたのですが、、今現在使っているのは「slick.js」！早速設定していきましょう！

-まずは表示させてみよう-

公式サイトより（http://kenwheeler.github.io/slick/）「get it now」をクリックして「Download Now」をクリックしてダウンロードします。

slick.js

 

解凍後以下のような階層にしましょう！

 

カスタマイズする場合のcssやjsはcommonファイルに書いていきます。

slicksliderの階層の考え方

index.htmlへの記述

<head>に

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

cssの読み込みの順番に注意してくださいね！

index.html スライドを入れたい部分に

<section>
  <ul class="slides">
    <li><img src="img/1.jpg"></li>
    <li><img src="img/2.jpg"></li>
    <li><img src="img/3.jpg"></li>
</ul>
</section>

このマークアップはdivでもよいです。
今回は.slidesですがclass名はお好みでよいです。変更した場合はjsの指定しているclass名も要変更！

index.htmlの</body＞の前に以下を記述

<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha384-/LjQZzcpTzaYn7qWqRIWYC5l8FWEZ2bIHIz0D73Uzba4pShEcdLdZyZkI4Kv676E" crossorigin="anonymous"></script>
<script src="js/slick.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/common.js"></script>

common.jsへの記述

 

$('.slides').slick({ 

  });

common.cssへの記述

（このあたりはお好みで！）

html, body {
      margin: 0;
      padding: 0;
    }

    * {
      box-sizing: border-box;
    }
    img {
      width: 100%;
    }

    .slides{
        width: 70%;
        margin: 20px auto;
    }

    .slick-slide {
      margin: 0px 20px;
    }
    .slick-slide {
      transition: all ease-in-out .3s;
      opacity: .2;
    }
    
    .slick-active {
      opacity: .5;
    }

    .slick-current {
      opacity: 1;
    }

ここまでのサンプルはこちら

cogumo