slick.jsのスライダーで両サイドをチラ見せする方法

jQuery

当記事アイキャッチのようにスライダーで両サイドをチラ見せする方法を記します。

前回の記事 slick.jsでシンプルなスライダーを実装する方法【たった4ステップです】ではシンプルなスライダーを作成する方法を書きました。
前回のコードに追記をして実現していきます。


JSとCSSの修正たった2ステップです




①JSでCenterModeを指定する

スライダーを作成する記述に以下のように2行追加します。(コメントアウトしている両サイドをチラ見せ野部分)

	$('.slider').slick({
	    autoplay: true,
	    autoplaySpeed: 2000,
	    speed: 800,
	    dots: true,
	    arrows: true,
	    infinite: true,
	    pauseOnHover: false,
	    /*----両サイドを表示----*/
	    centerMode:true,
	    centerPadding:"20%",
	    /*----------------------*/
	});

両サイドがでてきました。centerPaddingの%を変えることでどれぐらいチラ見セするかを決めれます。

スライダー画像
スライダー画像


②CSSでスライド間の横幅を調整する

今のままではスライド間に隙間がなくくっついてしまっているので、間隔を調整します。
CSSに以下の記述を追加します。

/*-------横幅の間隔をとる-------*/
	.slick-slide{
    margin-right: 1vw!important;
    margin-left: 1vw!important;
	}
/*------------------------------*/

スライド間に隙間を作れました。

スライダー画像
スライダー画像



以上Slickスライダーで両サイドをチラ見セする方法でした。

コメント

タイトルとURLをコピーしました