今回は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のライブラリを使って、「縦横比を保ったまま画像スライダーする方法」でした。
