サムネイル付きのスライダーを作りたい
こんなのを作ります。
Slick公式
参考にさせて頂いたサイトは以下
レスポンシブ対応のスライダープラグイン slickの使い方
【slick】サムネイルクリックで画像が切り替わるスライダーの作り方
コード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<!--slickのcss読み込み（その1）-->
<link rel="stylesheet" type="text/css"
href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
<!--slickのcss読み込み（その２）-->
<title>Document</title>
</head>
<style>
.wrapper {
width: 80%;
background-color: rgb(188, 240, 155);
margin: 0 auto;
}
.container {
margin: 30px auto 0;
max-width: 60%;
width: 75%;
background-color: cornsilk;
}
img {
width: 100%;
}
</style>
<body>
<div class="wrapper">
<div class="container">
<div class="slider">
<img src="https://cdn.pixabay.com/photo/2020/06/24/07/16/potted-plant-5335130_1280.png" alt="" />
<img src="https://cdn.pixabay.com/photo/2016/01/08/11/57/butterflies-1127666__480.jpg" alt="" />
<img src="https://cdn.pixabay.com/photo/2017/07/25/01/22/cat-2536662__480.jpg" alt="" />
<img src="https://cdn.pixabay.com/photo/2016/08/28/23/24/sunflower-1627193__480.jpg" alt="" />
</div>
<div class="thumbnail">
<img src="https://cdn.pixabay.com/photo/2020/06/24/07/16/potted-plant-5335130_1280.png" alt="" />
<img src="https://cdn.pixabay.com/photo/2016/01/08/11/57/butterflies-1127666__480.jpg" alt="" />
<img src="https://cdn.pixabay.com/photo/2017/07/25/01/22/cat-2536662__480.jpg" alt="" />
<img src="https://cdn.pixabay.com/photo/2016/08/28/23/24/sunflower-1627193__480.jpg" alt="" />
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!--jquery読み込み-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<!--slick(カルーセル用プラグイン読み込み)-->
<script>
//カルーセル起動用の関数
$(function () {
$(".slider").slick({
autoplay: true,
arrows: false,
asNavFor: ".thumbnail",
});
$(".thumbnail").slick({
slidesToShow: 3,
asNavFor: ".slider",
focusOnSelect: true,
});
});
</script>
</body>
</html>
このコードだけでスライダーを実装出来ます。
ポイント
- slickのCDNでCSSを読み込む時は２種類読み込む必要があると言う事
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<!--slickのcss読み込み（その1）-->
<link rel="stylesheet" type="text/css"
href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
-
slickでやっていることはメインの画像とサムネイルの画像を囲っているdivタグにclassを付け、それぞれのclass名をscript内で指定する事で、連動する画像を配置している。ここだけ抑えれば基本はOK
-
slickを使用すると自動生成のdivタグが作られる為、cssが元のデザインと変わってしまうことがある。
その場合は焦らず、検証ツールで生成されたdivとclassを確認して、cssを付け直すと良い。 -
メイン画像と同様のクラス名のdivタグを別の場所に作り、その中にテキストを画像と同じ数だけ入れれば、テキストも連動してスライド可能。
-
