まずは下記のサイトからソースをダウンロード
http://kenwheeler.github.io/slick/#go-get-it
必要なファイルをFTPでアップロードしてhead内に入力↓↓↓
<link rel="stylesheet" type="text/css" href="slick/slick.css" />
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<style type="text/css">
.multiple { padding: 0;}
.multiple img { width: 100%;}
.multiple div { margin: 0 5px;}
.multiple .slick-next { right: 17px; z-index: 100;}
.multiple .slick-prev { left: 23px; z-index: 100;}
</style>
body内の任意の位置に
<div class="multiple">
<div><img src="img/1.jpg" alt=""></div>
<div><img src="img/2.jpg" alt=""></div>
<div><img src="img/3.jpg" alt=""></div>
<div><img src="img/4.jpg" alt=""></div>
<div><img src="img/5.jpg" alt=""></div>
</div>
</body>直前に
<script type="text/javascript">
$(document).ready(function(){
$('.multiple').slick({
autoplay: true, //自動再生
infinite: true, //スライドのループ有効化
dots: true, //ドットのナビゲーションを表示
slidesToShow: 4, //表示するスライドの数
slidesToScroll: 4, //スクロールで切り替わるスライドの数
responsive: [{
breakpoint: 768, //ブレークポイントが768px
settings: {
slidesToShow: 3, //表示するスライドの数
slidesToScroll: 3, //スクロールで切り替わるスライドの数
}
}, {
breakpoint: 480, //ブレークポイントが480px
settings: {
slidesToShow: 2, //表示するスライドの数
slidesToScroll: 2, //スクロールで切り替わるスライドの数
}
}]
});
});
</script>
でOK
左右の余白がうまく調整できなかったので
centerMode:true, を追加した
が .multiple div { margin: 0 5px;}が余白をおかしくした原因だったのでコチラを削除した
.multiple img { width: 100%;}から.multiple img { width: 90%;} に変更したら、ちょうどよい余白となった
makeshopのPCサイトではslick-theme.cssを１００MBサーバーにあげると文字化けしたので<head>内に直接入力
↓これも<head>内に入力
<link rel="stylesheet" type="text/css" href="https://gigaplus.makeshop.jp/teranishiya/slick
/slick.css" />
<!-- slickslider -->
<style type="text/css">
.multiple { padding: 0;}
.multiple img { width: 100%;}
.multiple .slick-next { right: 17px; z-index: 100;}
.multiple .slick-prev { left: 23px; z-index: 100;}
</style>
<body>内に
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="https://gigaplus.makeshop.jp/teranishiya/slick
/slick.min.js"></script>
<h2>おすすめ商品</h2>
<div class="multiple">
<div><img src="https://****/****/****.png" alt="" width="180px"></div>
<div><img src="https://****/****/****.png" alt="" width="180px"></div>
<div><img src="https://****/****/****.png" alt="" width="180px"></div>
<div><img src="https://****/****/****.png" alt="" width="180px"></div>
<div><img src="https://****/****/****.png" alt="" width="180px"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.multiple').slick({
autoplay: true, //自動再生
infinite: true, //スライドのループ有効化
dots: true, //ドットのナビゲーションを表示
slidesToShow: 4, //表示するスライドの数
slidesToScroll: 4, //スクロールで切り替わるスライドの数
responsive: [{
breakpoint: 768, //ブレークポイントが768px
settings: {
slidesToShow: 3, //表示するスライドの数
slidesToScroll: 3, //スクロールで切り替わるスライドの数
}
}, {
breakpoint: 480, //ブレークポイントが480px
settings: {
slidesToShow: 2, //表示するスライドの数
slidesToScroll: 2, //スクロールで切り替わるスライドの数
}
}]
});
});
</script>
と入力したら動いた
