JavaScript

slickで左右の画像、次の画像をチラ見させる方法

slickで左右の画像をチラ見せさせる方法
ニャンコ
ニャンコ

slickで下記のような実装方法を説明するよ

・真ん中のスライドの左右のスライドを表示させる方法
・右のスライド（次のスライド）をチラ見させる方法

左右にスライドを表示させるのは、良く見るけど、次のスライドだけチラ見させる方法は知らない人も多いんじゃない？

ワンコ
ワンコ

slickで左右の画像を表示

まずは、良く見るこの形、真ん中に一枚、その両端に次のスライドと、前のスライドがちょい見えしている状態。
これは、slickのオプションである、「centerMode」、「centerPadding」で簡単に実装できます。

◆引用
https://tr.you84815.space/slick/settings/centerMode.html

centerMode（センターモード）前後のスライドを部分的に含めてスライドを中央に表示します。
centerPaddingセンターモード時に左右のスライドをどれくらい出すかを指定します。
「px」か「%」で指定でき、この値が大きいほど、左右のスライドがはみ出して表示されます。
<ul id="slide">
    <li><img src="1.png" alt=""></li>
    <li><img src="2.png" alt=""></li>
    <li><img src="3.png" alt=""></li>
    <li><img src="4.png" alt=""></li>
    <li><img src="5.png" alt=""></li>
    <li><img src="6.png" alt=""></li>
</ul>
.slick-slide {
　// スライド間の隙間を指定
  margin: 0 10px;
}
jQuery('#slide').slick({
    autoplay: true,
    infinite: true,
    arrows: false,
    dots: false,
    pauseOnFocus: false ,
    pauseOnHover: false ,
    autoplaySpeed: 2000 ,
    speed: 1000
 
    //center modeとcenterPadding を指定
    centerMode: true,
    centerPadding: "20%",
});

元々オプションとして用意されているので簡単ですね

ワンコ
ワンコ

slickで左か右のスライドだけチラ見させる

センターモードはよく見ますが、次のスライド、またはスライドの画像をチラ見せさせるオプションはありません。
また、これに関してはネットで検索してもあまり情報が出てこないので、この記事で方法をご紹介いたします。

まずは次の二つのスライドをご覧ください。
それぞれ、次のスライドと前のスライドをチラ見せさせています。

次のスライドをチラ見せ

前のスライドをチラ見せ

2枚のスライド表示＋次のスライドチラ見せ

ソースは以下の通りです。
タグ構成はセンターモード時と同じなので省略しています。

// 前のスライドをチラ見せの時
#slide .slick-list {
    padding: 0 0 0 30% !important;
}

//次のスライドをチラ見せの時
#slide .slick-list {
    padding: 0 0 0 30% !important;
}
jQuery('#slide').slick({
    autoplay: true,
    infinite: true,
    arrows: false,
    dots: false,
    pauseOnFocus: false ,
    pauseOnHover: false ,
    autoplaySpeed: 2000 ,
    speed: 1000

    // 画像の枚数を指定、1枚表示、１枚チラ見せさせたい場合は、１を指定
    slidesToShow: 1,
});

ポイント

ポイントは二つ。

「slick-list」の右か左にpaddingを追加する。

centerPaddingオプションがありますが、ようは自分でpaddingを追加して同じような動きをさせるということです。

slidesToShowの枚数は、チラ見せで２枚表示したい場合は、１を。３枚表示したい場合は、２を指定する。

以上、slickの左右の画像を表示させる方法でした。
ぜひお試しください。

ワンコ
ワンコ


-JavaScript
-, ,