【解説】slickでインナー幅からはみ出して反映【片側のみ可能】

2023年6月6日2023年8月12日

記事内に広告を含みます

パソ君

・slickでインナー幅からはみ出して反映方法は？

こんな疑問にお答えします。

slickにてスライダーを実装するとき、インナー幅からはみ出したいときありますよね。

デザインカンプによっては片側のみはみ出すときもあるはず。

実はそれ簡単に実装可能です。

ジト

すぐにできるよ！

ということで、この記事では「slickでインナー幅からはみ出して反映」について解説していきます！

この記事でわかること

・slickでインナー幅からはみ出して反映
・slickでインナー幅からはみ出して反映【片側のみ】

2023年1月24日【jQuery】slickの使い方｜初心者向けに解説【レスポンシブ対応】

【解説】slickでインナー幅からはみ出して反映
- 「overflow: visible;」を使う
- 大枠に「overflow: hidden;」を忘れずに
【解説】slickでインナー幅からはみ出して反映【片側のみ可能】
【解説】slickでインナー幅からはみ出して反映【片側のみ可能】：まとめ

【解説】slickでインナー幅からはみ出して反映

通常のスライダーを実装したら、下記のようにインナー幅内のみしか反映しないですよね↓

See the Pen slickはみ出す➀ by jito-coder (@jito-coder) on CodePen.

ピンク色の背景で囲われた部分が、インナー幅。

ただインナー幅からはみ出したslickを実装することが可能です。
そのサンプルがこちらになります↓

See the Pen slickはみ出す➀ by jito-coder (@jito-coder) on CodePen.

はみ出して反映していますよね。

はみ出させるための重要なコードがこちら↓

.test__container {
  overflow: hidden;
  padding-bottom: 100px;
}

.slick-list{
    overflow: visible;
}

「overflow: visible;」を使う

はみ出させる方法の結論が、下記コードを記述することです。

.slick-list{
    overflow: visible;
}

.slick-listに対して「overflow: visible;」を指定すること。

これだけです。これだけで本来隠れているクローン達のスライダー要素を反映することができます。

大枠に「overflow: hidden;」を忘れずに

ただし大枠に対して「overflow: hidden;」を忘れずに指定しましょう。

これを指定しないと、横スクロールが発生しますからね。

今回は例として下記大枠部分に指定しました。

.test__container {
  overflow: hidden;
  padding-bottom: 100px;
}

【解説】slickでインナー幅からはみ出して反映【片側のみ可能】

はみ出したいけど「片側だけでよい」という場合もありますよね。

その場合のサンプルがこちら↓

See the Pen slickはみ出す➁ by jito-coder (@jito-coder) on CodePen.

全体のコードとしては、先ほどと全く同じです。

自動再生の「autoplay」をなくし、「infinite: false,」にしてクローンの作成を無効化すれば実装できます。

$(function () {
    $(".test-slick").slick({
        infinite: false,
        arrows: true,
        prevArrow: '<button class="arrow_name prev_arrow"></button>',
        nextArrow: '<button class="arrow_name next_arrow"></button>',
        slidesToShow: 3,
    });
});