• slick

【簡単】slickを使って次のスライドをチラ見せさせる方法【CSS・jQuery】

スマホでよく見かける【次のスライドをチラ見せさせるスライダー】を実装したい。

スライダープラグインを使って実装したい。

本記事ではスライダープラグインの定番slickを使って、このような悩みを解決します。

※事前にjQuery・slickプラグインをCDNなどで実装環境に読み込みましょう。

実装サンプル

See the Pen
Untitled by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

上記コードペンを見てわかるように、次のスライドが少し見え隠れしてます。

フリックしたら次のスライドが現れて、同じくその次のスライドがちら見せになってます。

実装方法は次章より説明します。

slickの実行関数

$(function() {
  $(".slider").slick({
    slidesToShow: 1,
  });
});

まず最初にslickの実行関数をスクリプト内に記述します。

通常のスライダーを実装するときとあまり変わりません。

slidesToShowオプションを使って、最初に表示するスライドの枚数を指定します。

前章のコードペンサンプルだとチラ見せしてるスライダーを除いて１枚表示なのでslidesToShowプロパティに1を入れます。

CSS

.slick-list {
    padding: 0 10% 0 0 !important;
}
.slick-slide {
    margin-right: 15px;
}
.slick-list img {
  width: 100%;
}

最後にCSSで次のスライドをチラ見せさせます。

自動生成されるslick-slideクラスにpaddingプロパティを入れチラ見せさせたい比率を記述します。

今回の例だと次のスライドの10％を表示してます。

スライド要素の間隔を開けたい場合はslick-slideプロパティにマージンを入れます。

レスポンシブに対応できるようスライド要素には100%を指定します。

今回の例だとスライド要素に画像を使ってるのでimg要素にwidth: 100%;を指定します。

以上で次のスライドをチラ見せさせるスライダーの完成です。

まとめ

本記事で紹介したチラ見せスライダーは、訪問者にスワイプさせるのを促す見せ方の中で割と主流なのでぜひ実装してみてください。

以上で解説を終わります。