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

2021.07.23

JavaScript

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

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

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

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

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

本記事の内容

Swiperを読み込む
Swiperでスライダーを作成する
左右の画像が表示されるようにスタイルを追加する
最後に

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

Swiperを読み込む

まずは重要かつ基本となるSwiperの本体を読み込みます。Swiperは開発者様からCDNが提供されていますので、下記を読み込めばOKです！

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

続いてSwiperのHTMLとJavaScriptを設置してSwiperを動かしていきます。

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

公式サイトに掲載されている通り、Swiperのレイアウトを設置します。

本記事では公式に掲載されているHTMLレイアウトのサンプルから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>

HTMLレイアウトは上記の通りです。画像のパスは環境に応じてご変更ください。

続いてJavaScriptでSwiperを初期化します。初期化、と書いていますが、動作するためにスクリプトを準備する、という意味合いです。

前項で読み込んだSwiperのライブラリファイルの行より下の位置に下記のスクリプトを追加します。そうすることでSwiperが動き始めます。

JS

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

ここまででSwiperの基本的な動作は確認できます。現状では画像が一枚しか表示されない状態かと思いますので、少しだけCSSでスタイルを追加していきます。

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

下記は左右の画像が見切れて表示されるSwiperを作成する上で肝となる箇所です。

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

#app {
    overflow: hidden;
} 
.swiper-container  {
    width: 100%;
    height: 100vh;
    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.

最後に

Swiperはとても使いやすいスライダーで、純粋なJavaScriptだけで開発されているので、jQueryを気にせずに使用できるのは素晴らしいですよね。ほとんどの要望に応えてくれるカスタマイズ性もありますので、今後もお世話になりそうです。これからも色々なスライダーを作成して、皆さんに共有していければと思います。

以上、Swiperで左右の画像が見切れて表示される中央寄せのスライダーの作り方のご紹介でした！