【Swiper】左右の画像が見切れて表示される中央寄せのスライダーの作り方

こんにちは、ryohei（@ityryohei）です！

本記事では、Swiperを使用して、左右の画像が見切れて表示される中央寄せのスライダーの作り方をご紹介しています。

今回ご紹介する内容はどんな場面でも使用できるという方法ではなく、かなり限定的です。おそらく下記のようなケースでのみ有効かと思います。

複数の画像の幅と高さが均一のスライダー

「Swiper 左右の画像」等のキーワードで検索すると汎用的に使用することができる素晴らしいサンプルがたくさんございます。ただ、それらの方法を試しても思った動きにならないよ……という場合に試していただければと思います。

では、解説していきます。

Swiperを読み込む

まずは重要かつ基本となる「Swiper」の本体を読み込みましょう。

「Swiper」は開発者様からCDNが提供されていますので、下記を読み込めば準備OKです！

<!-- Swiper CSS -->
<link rel="stylesheet"href="https://unpkg.com/swiper/css/swiper.min.css">
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>

続いて「Swiper」のHTMLとJSで実際に動くスライダーを作成します。

Swiperでスライダーを作成する

公式サイトにばっちり掲載されていますが、「Swiper」で基本となるスライダーを作成します。その際に「swiper-container」と書かれている要素をラップするタグを一緒に記述します。

また、本記事では公式に掲載されているサンプルから「pagination」と「prev・next」の矢印を除外したタグを使用していきます。私の環境で必要がなかっただけで、もし必要であれば除外しなくても大丈夫です！

HTML

<div id="app">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="sample001.jpg"  alt=""></div>
            <div class="swiper-slide"><img src="sample002.jpg"  alt=""></div>
            <div class="swiper-slide"><img src="sample003.jpg"  alt=""></div>
            <div class="swiper-slide"><img src="sample004.jpg"  alt=""></div>
            <div class="swiper-slide"><img src="sample005.jpg"  alt=""></div>
        </div>
    </div>
</div>

後は下記のスクリプトを「Swiper」本体を読み込んだタグより下の行に記述すればスライダーが動き始めるかと思います！

JS

var mySwiper = new Swiper ('.swiper-container', {
    loop: true,
    autoplay: 3000,
    speed: 1000,
    slidesPerView: 1,
})

ただ、この状態だと画像が一枚しか表示されない状態かと思います。最後にちょちょっとスタイルを追加しましょう！

左右の画像が表示されるようにスタイルを追加する

下記は左右の画像が見切れて表示されるスライダーを作るのに一番大切なCSSとなります。

「max-width」には実際に使用する画像の幅を設定しましょう。そうすることで左右の画像が見切れた中央寄せのスライダーになります。親要素に「overflow: hidden」をつけることを忘れないようにしましょう！

#app {
    overflow: hidden;
} 
.swiper-container {
  width: 100%;
  max-width: 940px !important;
  margin: 0 auto !important;
  overflow: visible !important;
}

本記事でご紹介した内容をすべて記述すると下記のようなスライダーが完成します。「EDIT ON CODE PEN」をクリックして全画面で見ていただくと、中央寄せになっていることがお分かりいただけるかと思います！

See the Pen
Swiper Centered Slides｜Swiper by ryohei (@intotheprogram)
on CodePen.