slick 導入・矢印画像差し替え

画像スライダーslickの使い方、調べたのをまとめる。

導入

１．ファイル構成

slick.css
slick-theme.css
fontフォルダ
ajax-loader.gif
をcssフォルダにぶっこむ。

slick.min.js
をjsフォルダに。

２．ファイル読み込み

<link rel="stylesheet" type="text/css" href="/css/slick.css" media="all">
<link rel="stylesheet" type="text/css" href="/css/slick-theme.css" media="all">
<link rel="stylesheet" type="text/css" href="/css/style.css" media="all">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/slick.min.js"></script>

矢印画像を差し替える場合、style.css（ページのcss）はslickのcssの下に配置する。
これはslick.cssの内容をstyle.cssの内容に上書きするため。

３．スライド画像をhtmlに記述し、スクリプトを読み込む

<ul id="mainSlide">
<li><img src="/img/main_slide01.jpg"></li>
<li><img src="/img/main_slide02.jpg"></li>
</ul><!-- / #mainSlide -->

<script>
$(function(){
    var slick = $('#mainSlide').slick();    
});
</script>

オプションは以下を参考に。
http://singoro.net/note/jq-slick/

４．サムネイル画像を設置する場合

通常のslickと別に

<ul id="mainSlide">
<li><img src="/img/main_slide01.jpg"></li>
<li><img src="/img/main_slide02.jpg"></li>
</ul><!-- / #mainSlide -->

<div id="firstNav">
   <div class="slideThumb"><img src="" /></div>
   <div class="slideThumb"><img src="" /></div>
</div>

jQuery('#mainSlide').slick({//スライダー画像
      fade: true,
      arrows:false,
      responsive:true,
      asNavFor: '#firstNav'//サムネイル部分の要素を記述
    });
jQuery('#firstNav').slick({//サムネイル画像
      dots: false,
      arrows:false,
      slidesToShow: 6,
      focusOnSelect: true,
      asNavFor: '#mainSlide',//スライダー部分の要素を記述
    });

矢印画像差し替え

１．矢印画像をhtmlに記述

スライドの下に以下のように記述

<div id="arrows">
    <div class="slick-next">
        <img src="slide_next.png" alt="→">
    </div>
    <div class="slick-prev">
        <img src="slide_prev.png" alt="←">
    </div>
</div>

arrowの位置をcssで調整するために、親要素（例ではslick-container）を追記します。
よって以下の様な記述になる。

<div class="slick_container">
<ul id="mainSlide">
<li><img src="/img/main_slide01.jpg"></li>
<li><img src="/img/main_slide02.jpg"></li>
</ul><!-- / #mainSlide -->
<div id="arrows">
    <div class="slick-next">
        <img src="/img/slide_next.png" alt="→">
    </div>
    <div class="slick-prev">
        <img src="/img/slide_prev.png" alt="←">
    </div>
</div><!-- / #arrows -->
</div><!-- / .slick_container -->

２．html内のスクリプトを書き換える

オプションでarrowsを置き換える

<script>
$(function(){
    var slick = $('#mainSlide').slick({
        appendArrows: $('#arrows')

    });

//以下は必要ないと思う
    $('.slick-next').on('click', function () {
        slick.slickNext();
    });
    $('.slick-prev').on('click', function () {
        slick.slickPrev();
    });
});
</script>

３．style.cssに以下の内容を記述することで、CSSで矢印画像の位置を調整

.slick_container {
    width:360px; /* 任意の値 */
    margin:0 auto; /* 任意の値 */
    position:relative;
}

 .slick-prev, .slick-next {
    width:60px; /* 画像幅 */
    height:34px /* 画像高さ */
}
.slick-prev:before, .slick-next:before {
    content:"";
}
button.slick-prev, button.slick-next {
    z-index:2;
}
.slick-prev{left:20px; /* 任意の値 */}
.slick-next{right:20px; /* 任意の値 */}

.slick-arrow{z-index:10;/* 値は適当に */}

http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q10133342550
http://jsfiddle.net/thesolutionofaproblem/cv9zpypr/