【サンプル】カルーセルスライダー
カルーセルスライダー基本
基本、これだけで、画像をスライドすると動くようになる。figureタグ（figure要素）は、写真などのまとまりを表します。
http://uzurea.net/explanation-of-jquery-slider-slick/
〇サムネイルの変更方法
https://www.nxworld.net/tips/jquery-plugin-slick-image-paging.html
〇使用方法サンプル
https://gimmicklog.com/jquery/340/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> //ページTOPのjqury
<script type="text/javascript" src="javascript.js" charset="UTF-8"></script> //自作
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="slick/jquery-migrate-1.4.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="slick/slick.css" media="all" />
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css" media="all" />
【 HTML 】
<div class="slick-box">
<fgure><img src="img/image1.jpg" width="" height="" alt=""/></fgure>
<fgure><img src="img/image2.jpg" width="" height="" alt=""/></fgure>
<fgure><img src="img/image3.jpg" width="" height="" alt=""/></fgure>
<fgure><img src="img/image4.jpg" width="" height="" alt=""/></fgure>
</div>
【 JavaScript 】
<script type="text/javascript">
$(function() {
$('.slick-box').slick();
});
</script>
複数動かす場合
※infiniteはtrueを指定する事で、最後のスライドの次は最初のスライドへ……と、無限ループしてくれる。
数字は同じじゃないと画像の順番が飛ぶ
<script type="text/javascript">
$(function() {
$('.slick-box').slick({
infinite: true,
slidesToShow: 2, //何枚表示させるか
slidesToScroll: 2 //何枚移動させるか
});
});
</script>
画面に合わせて枚数を減らす場合
※infiniteはtrueを指定する事で、最後のスライドの次は最初のスライドへ……と、無限ループしてくれる。
数字は同じじゃないと画像の順番が飛ぶ
<script type="text/javascript">
$(function() {
$('.slick-box').slick({
dots: true, // スライダー下部に表示される、ドット状のページネーションです
infinite: true, // 無限ループ
speed: 300, // 切り替わりのスピード
slidesToShow: 4, //通常 1024px以上の領域では4画像表示
slidesToScroll: 4,
responsive: [{
breakpoint: 1024,settings: { //601px〜1024pxでは3画像表示
slidesToShow: 3,
slidesToScroll: 3,
}
},
{
breakpoint: 600,settings: { //481px〜600pxでは2画像表示
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,settings: {//480px以下では1画像表示
slidesToShow: 1,
slidesToScroll: 1
}
}]
});
});
</script>
センターモード
centerModeオプションをtrueに設定するとセンターモードになります。さらにcenterPaddingを設定する事で表示されているスライドの前後の要素が一部はみ出ているような形で表示されます。
<script type="text/javascript">
$(function() {
$('.slick-box').slick({
centerMode: true, //センターモード
centerPadding: '60px', //前後のパディング
autoplay: true, //オートプレイ
autoplaySpeed: 2000, //オートプレイの切り替わり時間
slidesToShow: 3,
responsive: [{
breakpoint: 768,
settings: {
arrows: false, // 前後の矢印非表示
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}]
});
});
</script>
ドットを画像にする
＜＜CSS＞＞
.slick-box .slick-dots {
position: static;
margin-top: 20px;
}
.slick-box .slick-dots li {
width: 120px;
margin: 0 0 0 20px;
}
.slick-box .slick-dots li:first-child {
margin-left: 0;
}
.slick-box .slick-dots li img {
width: 100%;
border-radius: 5%; /*ここを50%にすると楕円になる。*/
cursor: pointer;
transition: .2s ease-in-out;
}
.slick-box .slick-dots .slick-active img,
.slick-box .slick-dots li:hover img {
opacity: .6;
}
＜＜HTML＞＞
<div class="slick-box">
<div data-thumb="img/image1.jpg"><img src="img/image1.jpg" alt=""></div>
<div data-thumb="img/image1.jpg"><img src="img/image2.jpg" alt=""></div>
<div data-thumb="img/image1.jpg"><img src="img/image3.jpg" alt=""></div>
<div data-thumb="img/image1.jpg"><img src="img/image4.jpg" alt=""></div>
<div data-thumb="img/image1.jpg"><img src="img/image5.jpg" alt=""></div>
</div>
＜＜Javascript＞＞
<script type="text/javascript">
$(function() {
$('.slick-box').slick({
dots: true,
accessibility: true,
arrows: false,
customPaging: function(slider, i) {
var thumbSrc = $(slider.$slides[i]).data('thumb');
return '<img src="' + thumbSrc + '">';
}
});
});
</script>
