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

slickについて

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

slickが使いやすい理由

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

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;
}

slickのバグ？

通常で使用する分には問題がないのですが「slick-active」というクラスが、ページを読み込み終わった直後に全てについてしまう現象が発生します。
このせいで、クラスを付与することで動きを制御したい場合に邪魔になってしまいます。

詳しくは下記参照
http://hacknote.jp/archives/11517/

この記事を書いた人（著者情報）

片山

カタチップ編集長。昭和生まれの30代でWeb業界歴は10年以上。現在はカタチップを運用しつつ事業会社でWEBメディアサイトのWebディレクター兼マークアップエンジニアを担当。最近はSNSの運用にも業務範囲を拡大中です。