【jQuery】実務で使用したslickの応用

1 slickについて
2 実務で使用したslickの応用的な使用方法
3 仕組み
4 slickのバグ？

slickについて

今回はWeb制作におけるslickに関する内容の記事です。slickは「the last carousel」と呼ばれるほど必要な機能を全て満たすカルーセルのjQueryプラグインとなっています。
社内でも2015年頃からはスライダーを実装する時は「slick」を使用するのが主流となり、現在でも社内の標準スライダーとして各案件で活躍しています。

slickが使いやすい理由

・初心者でも簡単に実装できて有名な「bxSlider」、「FlexSlider」などとと同じくslickも使いやすい
・レスポンシブ対応
・モダンブラウザはもちろんのことIE8、andorid2系4系でも問題なく動く

slickの基本的な使い方

コリス様を始め、基本的な使い方については検索すると山ほどヒットするので今回の記事では割愛します。

実務で使用したslickの応用的な使用方法

今回はデフォルトのslickへ下記の仕様を追加しました。

slick-dots（画像下の黒丸）を画像にする
サムネイルのホバー時、カレント時に画像を変える
slick-dotsをクリックした時にアンカー機能を追加する

仕組み

>> DEMOはこちらから！

■JavaScript

$(function(){
      $('.slides').slick({
      speed: 700,
      dots: true,
      arrows: false,
      fade: true,
      asNavFor: '.slides-nav'
    });
    $('.slides-nav').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      dots: true,
      asNavFor: '.slides',
      focusOnSelect: true
    });
   //アンカー機能の処理
    $(".carousel button").click(function () {
        var i = $(".carousel button").index()
        var p = $("#slideAn").eq(i).offset().top;
        $('html,body').animate({ scrollTop: p }, 'fast');
    });
});

■CSS

.slides-nav .slick-dots li {
    position: relative;
    display: inline-block;
    width: 176px;
    height: 128px;
    margin: 0 0 0 20px;
    padding: 0;
    cursor: pointer;
    background: url("../image/thum_01.gif") no-repeat center top;
}
.slides-nav .slick-dots li:first-child {
  margin: 0;
}
.slides-nav .slick-dots li:nth-child(2) {
    background: url("../image/thum_02.gif") no-repeat center top;
}
.slides-nav .slick-dots li:nth-child(3) {
    background: url("../image/thum_03.gif") no-repeat center top;
}
.slides-nav .slick-dots li:nth-child(4) {
    background: url("../image/thum_04.gif") no-repeat center top;
}
.slides-nav .slick-dots li:nth-child(5) {
    background: url("../image/thum_05.gif") no-repeat center top;
}

.slides-nav ul.slick-dots li.nav0 {
  background: url("../image/thum_01.gif") no-repeat center top;
}
.slides-nav ul.slick-dots li.nav1 {
  background: url("../image/thum_02.gif") no-repeat center top;
}
.slides-nav ul.slick-dots li.nav2 {
  background: url("../image/thum_03.gif") no-repeat center top;
}
.slides-nav ul.slick-dots li.nav3 {
  background: url("../image/thum_04.gif") no-repeat center top;
}
.slides-nav ul.slick-dots li.nav4 {
  background: url("../image/thum_05.gif") no-repeat center top;
}

.slides-nav ul.slick-dots li.active-nav0 {
  background: url("../image/bg_thum_01.gif") no-repeat center top;
}
.slides-nav ul.slick-dots li.active-nav1 {
  background: url("../image/bg_thum_02.gif") no-repeat center top;
}
.slides-nav ul.slick-dots li.active-nav2 {
  background: url("../image/bg_thum_03.gif") no-repeat center top;
}
.slides-nav ul.slick-dots li.active-nav3 {
  background: url("../image/bg_thum_04.gif") no-repeat center top;
}
.slides-nav ul.slick-dots li.active-nav4 {
  background: url("../image/bg_thum_05.gif") no-repeat center top;
}

.slides-nav ul.slick-dots li.nav0.slick-active {
  background: url("../image/bg_thum_01.gif") no-repeat center top;
}
.slides-nav ul.slick-dots li.nav1.slick-active {
  background: url("../image/bg_thum_02.gif") no-repeat center top;
}
.slides-nav ul.slick-dots li.nav2.slick-active {
  background: url("../image/bg_thum_03.gif") no-repeat center top;
}
.slides-nav ul.slick-dots li.nav3.slick-active {
  background: url("../image/bg_thum_04.gif") no-repeat center top;
}
.slides-nav ul.slick-dots li.nav4.slick-active {
  background: url("../image/bg_thum_05.gif") no-repeat center top;
}

.slides-nav .slick-dots li:hover,
.slides-nav .slick-dots li.slick-active {
      background: url("../image/bg_thum_01.gif") no-repeat center top;
}

.slides-nav .slick-dots li:nth-child(2):hover,
.slides-nav .slick-dots li.slick-active:nth-child(2) {
      background: url("../image/bg_thum_02.gif") no-repeat center top;
}
.slides-nav .slick-dots li:nth-child(3):hover,
.slides-nav .slick-dots li.slick-active:nth-child(3) {
      background: url("../image/bg_thum_03.gif") no-repeat center top;
}
.slides-nav .slick-dots li:nth-child(4):hover,
.slides-nav .slick-dots li.slick-active:nth-child(4) {
      background: url("../image/bg_thum_04.gif") no-repeat center top;
}
.slides-nav .slick-dots li:nth-child(5):hover,
.slides-nav .slick-dots li.slick-active:nth-child(5) {
      background: url("../image/bg_thum_05.gif") no-repeat center top;
}