jQuery

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

More than 3 years have passed since last update.

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


導入


1.ファイル構成

slick.css

slick-theme.css

fontフォルダ

ajax-loader.gif

をcssフォルダにぶっこむ。

slick.min.js

をjsフォルダに。


2.ファイル読み込み

<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の内容に上書きするため。


3.スライド画像を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/


4.サムネイル画像を設置する場合

通常の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',//スライダー部分の要素を記述
});


矢印画像差し替え


1.矢印画像を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 -->


2.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>


3.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/