slick（スライダー）に関する小技（HTML/CSS/JS）

2020.10.25公開（2021.5.31更新）
@HTMLコーディング
#部品

前書き

HTMLコーディングに使える、slick（スライダー）に関する小技を掲載しています。

slick

slickドキュメント翻訳 | slick - にほんご。

見本其の一

スライドが表示したら何かする

スライド内

表示したスライドにはクラス（slick-active）が付くので、cssで、クラスが付く前と、付いた後の装飾を指定する。


<ul class="slider">
  <li class="slide">1</li>
  <li class="slide">2</li>
</ul>


/* 初め */
  .slide {}
/* 表示した時 */
  .slide.slick-active {}


$('.slider').slick();

スライド外

用意されているイベントを使用する。例として、カウンターを作る。


<ul class="slider">
  <li class="slide">1</li>
  <li class="slide">2</li>
</ul>
<div class="count"></div>


//初め
  let first = 0;
  $('.slider').slick({
    initialSlide: first, //初めに表示するスライド
  });
  $('.count').text( first + 1 );
//スライドが変わったら
  $('.slider').on('afterChange', function( event, slick, currentSlide ){
    $('.count').text( currentSlide + 1 );
  });

特定のスライドを表示する

ボタン

特定のスライドを表示するボタンを作る


<ul>
  <li data-sldnum="1">1</li>
  <li data-sldnum="2">2</li>
</ul>


$('[data-sldnum]').on('click', function() {
  const sldNum = $(this).data("sldnum");
  $('.slider').slick('slickGoTo', sldNum - 1, false );
});

ハッシュ

ページを読み込んだ時に、ハッシュに応じて、特定のスライドを表示する

#1　#2　#3　#4


//ハッシュに応じて、初めに表示するスライドを指定する
  const locHash = location.hash; //ハッシュを取得
  const sldLng = $('.slide').length; //スライドの数を取得
  let first = 0; //ハッシュがない場合に、初めに表示するスライド

  if( locHash ){ //ハッシュがあれば#の後ろの一文字を取得
    const prtHash = locHash.slice(1,2);
    if( prtHash > 0 && prtHash <= sldLng ){
      first = prtHash - 1;
    }
  }
//スライダー
  $('.slider').slick({
    initialSlide: first, //初めに表示するスライド
  });

見本其の二

中央に来たら何かする

中央に来たスライドにはクラス（slick-center）が付くので、cssで、クラスが付く前と、付いた後の装飾を指定する。


<ul class="slider">
  <li class="slide">1</li>
  <li class="slide">2</li>
</ul>


/* 初め */
  .slide {}
/* 中央に来た時 */
  .slide.slick-center {}


$('.slider').slick({
  centerMode: true,
  variableWidth: true,
});

まとめ

基本となるコードも含めて、まとめて掲載しています。


<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<!-- jQueryを読み込んだ後 -->
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<!-- 中略 -->

<!-- 見本 其の一 -->
<div>
  <div class="inner">
    <!-- スライダー -->
    <ul class="slider slider-a">
      <li class="slide slide-a">1</li>
      <li class="slide slide-a">2</li>
      <li class="slide slide-a">3</li>
      <li class="slide slide-a">4</li>
    </ul>
    <!-- 矢印 -->
    <div class="prev prev-a"><img src="icon.svg"></div>
    <div class="next next-a"><img src="icon.svg"></div>
    <!-- カウンター -->
    <div class="count"></div>
  </div>
  <!-- ドット -->
  <div class="dots dots-a"></div>
</div>

<!-- 見本 其の二 -->
<div>
  <div class="inner">
    <!-- スライダー -->
    <ul class="slider slider-b">
      <li class="slide slide-b">1</li>
      <li class="slide slide-b">2</li>
      <li class="slide slide-b">3</li>
      <li class="slide slide-b">4</li>
    </ul>
    <!-- 矢印 -->
    <div class="prev prev-b"><img src="icon.svg"></div>
    <div class="next next-b"><img src="icon.svg"></div>
  </div>
  <!-- ドット -->
  <div class="dots dots-b"></div>
</div>


  .inner{
    position: relative;
  }
//jsが動いたら表示（ページを読み込んだ時に、がたつくのを防ぐ）
  .slider{
    display: none;
    &.slick-initialized{
      display: block;
    }
  }
//ドットの装飾
  .slick-dots{
    display: flex; justify-content: center; margin: 0.75em 0 0;
    & li{
      width: 0.8em; height: 0.8em; margin: 0 0.3em;
    }
    & li button{
      width: inherit; height: inherit; color: transparent; vertical-align: top; line-height: 0;
      background: #e7d4e3; padding: 0; border: 0; outline: 0; border-radius: 50%; cursor: pointer;
    }
    //アクティブ
    & li.slick-active button{
      background: #a675a5;
    }
  }
//矢印の装飾
  .prev,
  .next{
    position: absolute; top: 0; bottom: 0; width: 2em; height: 2em; margin: auto; cursor: pointer;
  }
  .prev{
    left: 0.5em; transform: scale(-1, 1); //矢印 左右反転
  }
  .next{
    right: 0.5em;
  }
//動き
  .slide{
    transition-duration: .2s; transition-delay:.6s;
    //表示したら
    &.slick-active{}
    //中央に来たら
    &.slick-center{}
  }


//見本 其の一
//ハッシュに応じて、初めに表示するスライドを指定する
  const locHash = location.hash; //ハッシュを取得
  const sldLng = $('.slide-a').length; //スライドの数を取得
  let first = 0; //ハッシュがない場合に、初めに表示するスライド

  if( locHash ){ //ハッシュがあれば#の後ろの一文字を取得
    const prtHash = locHash.slice(1,2);
    if( prtHash > 0 && prtHash <= sldLng ){
      first = prtHash - 1;
    }
  }
//スライダー
  $('.slider-a').slick({
    dots: true, //ドットを表示
    appendDots: $('.dots-a'), //ドットの表示場所を指定 ※1
    infinite: true, //ループさせる
    arrows: false, //デフォルトの矢印は非表示 ※2
    initialSlide: first, //初めに表示するスライド
  });
//矢印
  $('.prev-a').on('click', function() {
    $('.slider-a').slick('slickPrev');
  });
  $('.next-a').on('click', function() {
    $('.slider-a').slick('slickNext');
  });
//カウンター
  $('.count').text( first + 1 );
  $('.slider-a').on('afterChange', function( event, slick, currentSlide ){
    $('.count').text( currentSlide + 1 );
  });
//特定のスライドを表示するボタン
  $('[data-sldnum]').on('click', function() {
    const sldNum = $(this).data("sldnum");
    $('.slider-a').slick('slickGoTo', sldNum - 1, false );
  });

//見本 其の二
//スライダー
  $('.slider-b').slick({
    dots: true,
    appendDots: $('.dots-b'),
    infinite: true,
    arrows: false,
    centerMode: true,
    variableWidth: true,
  });
//矢印
  $('.prev-b').on('click', function() {
    $('.slider-b').slick('slickPrev');
  });
  $('.next-b').on('click', function() {
    $('.slider-b').slick('slickNext');
  });

//※1 ドットの表示場所を指定
//ドットの表示場所をスライダーの外に指定した方が、ドットと矢印の位置が調整しやすい
//※2 デフォルトの矢印は非表示
//別途、矢印を用意した方が、矢印の装飾がしやすい
});

トップページ

記事一覧

分類

@HTMLコーディング
@素読
@社会
@旅行

タグ