【Swiper】縦横比を保ったまま画像スライダーする方法

JavaScript

今回はSwiperのライブラリを使って、「縦横比を保ったまま画像スライダーする方法」を紹介します。

画像スライダーは実際の業務でも頻繁に使うので、WEB制作を行う人は是非マスターしましょう!

Swiperとは?

Swiperとは、画像をスライダーさせることができるJavaScriptライブラリです。

jQueryに依存せず、スライダーを自由にカスタマイズすることもできます。

【Swiper】縦横比を保ったまま画像スライダーする方法

完成形はこちらです。

それでは実際に作っていきましょう。

コピペできるので、是非試してみてください。

Swiperを使うための準備

まずはSwiperを使うための準備からしていきましょう。

以下のコードをheadタグの中に記述してください。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.min.css">

次に以下のコードをbodyの閉じタグの直前に記述してください。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.min.js"></script>

上記のコードを書かないと、Swiperが動かないので注意してください。

HTML

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img src="./image/img1.JPG" alt="">
        </div>
        <div class="swiper-slide">
            <img src="./image/img2.JPG" alt="">
        </div>
        <div class="swiper-slide">
            <img src="./image/img3.JPG" alt="">
        </div>
        <div class="swiper-slide">
            <img src="./image/img4.JPG" alt="">
        </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

画像パスは自由に変えてください。

SwiperでのHTMLコードの書き方は公式サイトに書いてあるので、是非確認してみてください。

CSS

.swiper-container {
  position: relative; 
}

.swiper-container:before {
  content: "";
  display: block;
  padding-top: 50%;
}

.swiper-wrapper {
  position: absolute; 
  top: 0;
  left: 0;
}

.swiper-wrapper img {
    width: 100%;
    height: auto;
}

画像の縦横比を保つために、親要素であるswiper-containerに「position: relative; 」を指定します。

そして、swiper-containerの擬似要素であるbeforeに対して「padding-top: 50%;」で幅を持たせるようにします。

JavaScript

var mySwiper = new Swiper('.swiper-container', {
    loop: true,

    pagination: {
        el: '.swiper-pagination',
    },

    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
})

JavaScriptでは、画像がループ出来るようにし、ページボタンを押すことで画像が切り替わるようにしました。

まとめ

以上が、Swiperのライブラリを使って、「縦横比を保ったまま画像スライダーする方法」でした。