スライダー　slickのメモ　横画像が異なる6枚スライド

スライダーのメモ

オプションを忘れてしまうので、自分用にメモ

f:id:sorawaaoi2016:20190121225025j:plain — 例題

縦横サイズの異なる画像のスライダー　ダウンロード先はここ

kenwheeler.github.io

で、例題として

6枚の画像を1枚目から動かす　 variableWidth: true,　を忘れずに書くこと

<html>
<head>
・・・略・・・
<style type="text/css">
ul {
/* display: flex; */
margin: 0;
padding: 0;
height: 400px;
}
li {
padding: 0;
list-style: none;
}
</style>
</head>
<body>
<p>すべての縦サイズは400px。そのうち1と4と6の3枚は縦長サイズ、2と3と5は横長サイズ、合計6枚をスライド</p>
<section style="width:90%; margin: auto;">
<ul class="slider">
<li><img src="img/img01.jpg" alt=""></li>
<li><img src="img/img02.jpg" alt=""></li>
<li><img src="img/img03.jpg" alt=""></li>
<li><img src="img/img04.jpg" alt=""></li>
<li><img src="img/img05.jpg" alt=""></li>
<li><img src="img/img06.jpg" alt=""></li>
</ul>
</section>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/slick.min.js"></script>
<script>
$(function() {
$('.slider').slick( {
// スライドをループ初期値:true
infinite: true,
// ドットナビゲーション表示初期値:false
dots: true,
// 表示スライド数初期値:1
slidesToShow: 3,
// 自動再生初期値:false
autoplay: true,
// 開始スライド初期値:0 　0が①の画像のこと
initialSlide: 0,
// 前次マーク表示初期値:true
arrows: false,
// 画像高さを自動調整初期値:false　今回は全部同じなのでfalseのまま
adaptiveHeight: false,
// 画像横幅を自動調整初期値:false 今回は横幅が1,4,6が縦長画像なので自動調整
variableWidth: true,
});
$('li').click(function() {
$(".trigger").removeClass("active");
});
});
</script>
</body>
</html>