![パソ君](https://jito-site.com/wp-content/uploads/2022/02/computer09_question.png)
パソ君
・slickのセンターモードのやり方は?
こんな疑問にお答えします。
slickでスライダーを実装するとき、中央配置にして左右が少しだけチラ見えしてるの作りたいときありますよね。
あれ実は簡単に実装可能です。
![ジト](https://jito-site.com/wp-content/uploads/2022/02/image.jpg)
ジト
すぐにできるよ!
ということで、この記事では「slickのセンターモードのやり方」について解説していきます!
この記事でわかること
slickのセンターモードのやり方
![](https://jito-site.com/wp-content/uploads/2023/01/f386510f79db6e55890aab5cd5f929ea-160x160.png)
目次
【簡単】slickのセンターモードのやり方【左右チラ見せ】
そんな中央配置にして左右チラ見せしてるサンプルがこちら↓
See the Pen slick縦➀ by jito-coder (@jito-coder) on CodePen.
$(function () {
$(".test-slick").slick({
arrows: false,
autoplay: true,
centerMode: true,
centerPadding: "15%",
dots: true,
});
});
コードの重要な点がこちら↓
- 「centerMode」を「true」にする
- 「centerPadding」にてチラ見せ幅を設定
順に見ていきましょう。
まずslickのオプション「centerMode」を「true」に設定します。
$(function () {
$(".test-slick").slick({
// ~~~
centerMode: true,
// ~~~
});
});
これでスライドを中央配置にすることができます。
そして前後のスライド要素を、チラ見せすることが可能に。
あとはチラ見せする横幅を設定すればOK。
やり方は「centerPadding」の値に記述するだけです。
今回は例として20%を記述しました↓
$(function () {
$(".test-slick").slick({
// ~~~
centerMode: true,
centerPadding: "20%",
// ~~~
});
});
![ジト](https://jito-site.com/wp-content/uploads/2022/02/image.jpg)
ジト
これで中央配置、かつチラ見せすることができるよ!
「centerPadding」の説明
・初期値は50px。
・値は「px」もしくは「%」で指定可能。
【簡単】slickのセンターモードのやり方【枚数を変える】
先ほどは中央に1枚のサンプルでした。
ただ複数枚の中央配置も可能です。
サンプルとして3枚のスライドを中央にしました↓
See the Pen slickセンターモード➀ by jito-coder (@jito-coder) on CodePen.
「slidesToShow」の値を変えれば実装できます。
またそれに合わして「centerPadding」の値も変更しましょう。
$(function () {
$(".test-slick").slick({
arrows: false,
autoplay: true,
centerMode: true,
centerPadding: "5%",
slidesToShow: 3,
dots: true,
});
});
【簡単】slickのセンターモードのやり方【左右チラ見せ】:まとめ
- 「centerMode」を「true」にすると中央に配置可能
- 「centerPadding」でチラ見せする幅を設定可能
![ジト](https://jito-site.com/wp-content/uploads/2022/02/image.jpg)
ジト
センターモードを使う場合は参考にしてみてね!
![](https://jito-site.com/wp-content/uploads/2023/06/c49a34cae557e2e3f37825d2c8094dac-160x160.png)
![](https://jito-site.com/wp-content/uploads/2023/06/b93d3542fadd7bbb24bab10a4dbf4d98-160x160.png)