コンテンツ幅からはみ出したslickを実装！【両側・片側】

slickを使用してスライダーを設置すると、特に画像やコンテンツが多いサイトでは情報を効果的に、かつ簡単に表示することができます。
slickを使う方法については別の記事（【Slick / 初心者向け】WordPressにスライダーを導入する方法）でご紹介したので、今回はコンテンツ幅を超えてはみ出すSlickスライダーの作成方法をご紹介します。

はじめに

Slickとは多機能なスライダーを簡単に実装することができる、人気の高いjQueryプラグインです。
写真や商品を見せるときによく使われています。このツールを使えば、色々な画像をきれいに見せることができ、ユーザーがスワイプするだけで次の画像に移動することが可能です。
Slickの設定方法について詳しく知りたい場合は冒頭に載せたリンクから学ぶことができます。

基本的なSlickスライダー

デモ

slidesToShowが3なので3枚のスライドが表示されていて、左右は余白になっています。

See the Pen
【初心者向け】slick3枚表示 by GROWORKS (@groworks)
on CodePen.

コンテンツ幅を超えるスライダー（両側）

デモ

基本的にコードは変えていませんが、見やすくするためにコンテンツ幅に背景色を追加しました。

See the Pen
コンテンツ幅を超えてslick3枚表示 by GROWORKS (@groworks)
on CodePen.

背景がオレンジ色の部分がコンテンツ幅で、slickはそこからはみ出て左右いっぱいに表示されています。

ポイント

上記デモの中で重要なのはこちらのCSSです。これだけではみ出たslickが実装できます。

.slick-list{
    overflow: visible;
}

slickを動かすために必要なslick.cssで .slick-list{overflow: hidden;}と記述されているため、はみ出た部分は隠れるようになっています。それを編集したいのですがslick.cssを直接触るのはよくない（CDNだとそもそもできない）ので、編集したいページ用のCSSに記述します。そうすることでCSSが上書きされるはずです。

注意点

コンテンツ幅からはみ出るということは、slickの分横スクロールが発生してしまう恐れがあります。親要素にはoverflow: hidden;を指定し、余分な横スクロールの発生を予防しましょう。
デモでは#wrapperに付けていました。

#wrapper {
    overflow: hidden;
}

コンテンツ幅を超えるスライダー（片側）

デモ

右側だけコンテンツ幅を超えて表示されています。

See the Pen
【片側だけ】コンテンツ幅を超えてslick3枚表示 by GROWORKS (@groworks)
on CodePen.

ポイント

片側だけコンテンツ幅を超えるようにするには、両側がはみ出るときと同じく下記CSSが必要です。

.slick-list{
    overflow: visible;
}

そして次に変更するのはslickオプションのこの部分です。

$('.slick-slider').slick({
    infinite: false, // falseにする
});

これで片側だけコンテンツのインナー幅からはみ出るslickが実装できました。

まとめ

この記事では、インナー幅からはみ出すSlickスライダーの作成方法について学びました。スライダーはウェブサイトの魅力を高める素晴らしいツールですが、正しく設定しないと思わぬ問題が発生することがあります。ここで学んだポイントをおさらいしましょう。

1. .slick-listにoverflow: visible;を指定
2. 親要素（bodyや#wrapperなど）にはoverflow: hidden;を指定して横スクロールを予防
3. 片側だけはみ出させる場合はslickのオプションでinfinite: false を設定

これだけで簡単にslickスライダーをコンテンツのインナー幅からはみ出させることができました。
今回学んだ知識を活用して、あなたのウェブサイトをさらに魅力的にしていきましょう！