ウェブサイトのデザインにおいて、スライダーは視覚的な魅力を高め、ユーザーの注意を引きつける強力なツールです。特に、流れ続ける無限ループスライダーは、継続的な動きがユーザーに自然なインタラクションを提供し、サイト全体のダイナミズムを向上させます。本記事では、slickスライダーを使用して、流れ続ける無限ループスライダーを作成する方法を具体的な手順とコード例を交えて詳しく解説します。
流れ続ける無限ループスライダーとは
流れ続ける無限ループスライダーは、ユーザーが操作しなくても自動的にスライドが切り替わり、無限にループするスライダーのことです。このタイプのスライダーは、商品ギャラリーやポートフォリオ、ニュースフィードなどに適しており、コンテンツをシームレスに表示することができます。
基本設定
下記にてslickの基本を紹介していますのでご覧ください。
CodePen ソースコードサンプル
HTML構造の設定
<div class="carousel slick">
<div><img src="https://web-developer-note.com/codepen/images/slide01.jpg" alt="スライド1" width="600" height="400" class="imgauto"></div>
<div><img src="https://web-developer-note.com/codepen/images/slide02.jpg" alt="スライド2" width="600" height="400" class="imgauto"></div>
<div><img src="https://web-developer-note.com/codepen/images/slide03.jpg" alt="スライド3" width="600" height="400" class="imgauto"></div>
<div><img src="https://web-developer-note.com/codepen/images/slide04.jpg" alt="スライド4" width="600" height="400" class="imgauto"></div>
<div><img src="https://web-developer-note.com/codepen/images/slide05.jpg" alt="スライド5" width="600" height="400" class="imgauto"></div>
</div>CSSのカスタマイズ
スライダーの外観を整えるために、CSSでスタイリングを行います。特に、スライドの幅をレスポンシブに調整するために、CSS変数を使用しています。
.carousel .slick-slide{
min-width: var(--WIDTH);
max-width: var(--WIDTH);
}
@media screen and (min-width: 768px){
.carousel .slick-slide{
--WIDTH: 300px;
}
}
@media screen and (max-width: 767px){
.carousel .slick-slide{
--WIDTH: 150px;
}
}解説:
.carousel .slick-slide: 各スライドの最小幅と最大幅をCSS変数--WIDTHで設定しています。これにより、レスポンシブデザインを簡単に実現できます。- メディアクエリ:
画面幅768px以上: スライドの幅を300pxに設定。
画面幅767px以下: スライドの幅を150pxに設定。
この設定により、デスクトップとモバイルデバイスでスライドのサイズが適切に調整され、ユーザー体験が向上します。
slickの初期化
HTMLとCSSの設定が完了したら、JavaScriptでslickスライダーを初期化します。流れ続ける無限ループスライダーを実現するために、適切なオプションを設定します。
$(document).ready(function () {
$('.carousel').slick({
autoplay: true,
autoplaySpeed: 0,
speed: 5000,
cssEase: "linear",
arrows: false,
dots: false,
pauseOnFocus: false,
pauseOnHover: false,
pauseOnDotsHover: false,
waitForAnimate: false,
swipe: false,
draggable: false,
variableWidth: true,
responsive: [
{
breakpoint: 767,
settings: {
speed: 8000,
}
}
]
});
});ポイント:
autoplaySpeed: 0: 自動再生の開始までの遅延を0ミリ秒に設定。これはスムーズな連続再生を実現するためです。cssEase: "linear": スライドの移動にリニアなイージングを適用し、一定速度での動きを実現。
これらの設定により、スライダーは自動的かつスムーズに連続的に流れ続ける無限ループスライダーとして機能します。
