スライダーのメモ
オプションを忘れてしまうので、自分用にメモ
縦横サイズの異なる画像のスライダー ダウンロード先はここ
で、例題として
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>
このサンプルは http://nagano.world.coocan.jp/201899/index.html
なぜキリン？ と家人に言われました
自分の撮影した写真がたまたまあり、動物が好きだから
slickです
単純にliで設定した画像を動かすだけの設定しかしていないHTMLなので
あとはカスタマイズしていってくださいませ
参考にしたサイトは
簡単であります
もっと見栄え良くしたり
応用もいろいろできます
いろいろなサイトで紹介しています
