ウェブサイトのデザインにおいて、スライダーは視覚的なインパクトを与え、ユーザーの注意を引きつける重要な要素です。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でスタイリングを行います。特に、スライドのサイズと中央スライドの強調表示を実現します。
.carousel .slick-slide {
margin-inline: 10px;
transition: all 0.3s ease;
transform: scale(0.9);
}
.carousel .slick-slide.slick-current,
.carousel .slick-slide.is-active-next {
transform: scale(1);
}解説:
.carousel .slick-slide: 各スライドに左右のマージンを設定し、スムーズなトランジションと縮小効果を適用しています。これにより、非中央スライドが小さく表示されます。.slick-currentと.is-active-next: 現在の中央スライドと次にアクティブになるスライドに対して、縮小効果を解除し、スライドを通常のサイズに戻します。これにより、中央スライドが強調表示されます。
slickの初期化
中央スライドをさらに強調表示し、無限ループ時の動作を滑らかにするために、JavaScriptで動的にクラスを管理します。この実装により、通常のループでは2周目でスライダーがガタつく問題を解消します。
$(document).ready(function () {
const $carousel = $(".carousel");
$carousel.on("beforeChange", (event, slick, currentSlide, nextSlide) => {
$carousel.find(".slick-slide").each((index, el) => {
const $this = $(el),
slickindex = $this.attr("data-slick-index");
if (nextSlide == slick.slideCount - 1 && currentSlide == 0) {
if (slickindex == "-1") {
$this.addClass("is-active-next");
} else {
$this.removeClass("is-active-next");
}
} else if (nextSlide == 0) {
if (slickindex == slick.slideCount) {
$this.addClass("is-active-next");
} else {
$this.removeClass("is-active-next");
}
} else {
$this.removeClass("is-active-next");
}
});
});
$carousel.slick({
dots: true,
arrows: false,
infinite: true,
loop: false,
autoplay: true,
autoplaySpeed: 3000,
speed: 800,
pauseOnFocus: false,
pauseOnHover: false,
pauseOnDotsHover: false,
waitForAnimate: false,
centerMode: true,
centerPadding: '20%',
});
});解説:
beforeChangeイベント: スライドが切り替わる直前に発火するイベントです。このイベントを利用して、スライドに対して動的にクラスを追加・削除します。is-active-nextクラスの管理: 次にアクティブになるスライドにis-active-nextクラスを追加し、それ以外のスライドからは削除します。これにより、中央スライドの拡大を制御します。
意図と効果:
- ループ時のガタつき解消: 通常、slickスライダーは無限ループを実現するためにクローンスライドを生成します。しかし、このクローンスライドが原因で2周目以降にスライダーがガタつくことがあります。
is-active-nextクラスを動的に管理することで、中央スライドの拡大効果を正確に適用し、ガタつきを防止します。 - スムーズなアニメーション: クラスの追加・削除を通じて、中央スライドのみを拡大表示し、他のスライドは縮小表示に保つことで、視覚的な一貫性とスムーズなアニメーションを実現します。