【簡単】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オプションを使って、最初に表示するスライドの枚数を指定します。

前章のコードペンサンプルだとチラ見せしてるスライダーを除いて1枚表示なので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%;を指定します。

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

まとめ

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

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

Ads

関連記事

プログラミング

金額(値段)を三桁区切りで自動表示する方法

2019.12.05
188
WordPress プログラミング

【簡単】ワードプレスのRSSフィードを取得して、外部サイトに記事一覧を表示する方法

更新日:2020.05.27
400
JavaScript プログラミング

iframeで埋め込みしたユーチューブをiframe外で停止させる方法。

更新日:2021.01.02
358
HTMLCSS プログラミング

【CSS】select(セレクト)要素の矢印を消して画像にする方法

2022.01.09
161