あなたのキモチ つなげるカタチ

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

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

スポンサーリンク

この記事は2016年7月25日に公開した記事です。

現在とは状況が違う場合がありますのでご注意ください。

slickについて

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

slickが使いやすい理由

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

slickの基本的な使い方

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

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

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

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

仕組み

■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/

スポンサーリンク