テックコード -web関連の情報サイト- 
jQueryの人気プラグイン「Slick」を使ったスライダーアニメーションのサンプルコードをいくつか紹介します。Slickは、カスタマイズ可能で多機能なスライダーを簡単に実装できるプラグインです。
1. 基本的なスライダー
See the Pen Untitled by techcode sample (@techcode-sample) on CodePen.
最初に、Slickの基本的なスライダーの実装方法を紹介します。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Slick Slider</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel/slick/slick-theme.css"/>
<style>
.slick-slide img {
width: 100%;
display: block;
}
</style>
</head>
<body>
<div class="basic-slider">
<div><img src="https://via.placeholder.com/600x300?text=Slide+1" alt="Slide 1"></div>
<div><img src="https://via.placeholder.com/600x300?text=Slide+2" alt="Slide 2"></div>
<div><img src="https://via.placeholder.com/600x300?text=Slide+3" alt="Slide 3"></div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel/slick/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.basic-slider').slick({
autoplay: true,
autoplaySpeed: 2000,
dots: true,
arrows: true,
});
});
</script>
</body>
</html>
解説
.basic-slider: スライダーのコンテナ要素です。中に<div>タグを使って個々のスライドを作成しています。autoplay: true: 自動的にスライドが切り替わる設定です。autoplaySpeedで切り替えの速度をミリ秒単位で指定できます。dots: true: スライダーの下にページネーション用のドットを表示します。arrows: true: スライダーに左右の矢印ナビゲーションを表示します。
2. カードスタイルの複数表示スライダー
See the Pen Untitled by techcode sample (@techcode-sample) on CodePen.
次に、複数のスライドを同時に表示するカードスタイルのスライダーです。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card Style Slick Slider</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel/slick/slick-theme.css"/>
<style>
.slick-slide img {
width: 100%;
display: block;
}
</style>
</head>
<body>
<div class="card-slider">
<div><img src="https://via.placeholder.com/300x200?text=Card+1" alt="Card 1"></div>
<div><img src="https://via.placeholder.com/300x200?text=Card+2" alt="Card 2"></div>
<div><img src="https://via.placeholder.com/300x200?text=Card+3" alt="Card 3"></div>
<div><img src="https://via.placeholder.com/300x200?text=Card+4" alt="Card 4"></div>
<div><img src="https://via.placeholder.com/300x200?text=Card+5" alt="Card 5"></div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel/slick/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.card-slider').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
dots: true,
arrows: true,
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1
}
}
]
});
});
</script>
</body>
</html>
解説
slidesToShow: 3: 一度に表示されるスライドの数を3つに設定しています。slidesToScroll: 1: スライドをスクロールする際に1つずつ移動する設定です。responsive: ブレイクポイントを指定して、画面サイズに応じて表示するスライドの数を変更します。例えば、768px以下の画面幅ではスライドが2つ、480px以下では1つ表示されるように設定しています。
3. フェードアニメーションスライダー
See the Pen Untitled by techcode sample (@techcode-sample) on CodePen.
次は、スライドがフェードイン・フェードアウトするアニメーションを使ったスライダーです。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fade Animation Slick Slider</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel/slick/slick-theme.css"/>
<style>
.slick-slide img {
width: 100%;
display: block;
}
</style>
</head>
<body>
<div class="fade-slider">
<div><img src="https://via.placeholder.com/600x300?text=Fade+1" alt="Fade 1"></div>
<div><img src="https://via.placeholder.com/600x300?text=Fade+2" alt="Fade 2"></div>
<div><img src="https://via.placeholder.com/600x300?text=Fade+3" alt="Fade 3"></div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel/slick/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.fade-slider').slick({
autoplay: true,
autoplaySpeed: 2000,
dots: true,
arrows: true,
fade: true,
cssEase: 'linear'
});
});
</script>
</body>
</html>
解説
fade: true: スライドの切り替えがフェードイン・フェードアウトアニメーションで行われるように設定しています。cssEase: 'linear': フェードイン・フェードアウト時のアニメーションのイージングを線形に設定しています。これにより、一定速度でアニメーションが実行されます。
これらのサンプルコードを使って、Slickスライダーをカスタマイズする基本的な方法を学ぶことができます。各設定を調整することで、さまざまなデザインやレイアウトに対応したスライダーを作成できます。
