【Swiper】横幅100%のスライダー画像を実装する方法【jQuery不要】
SwiperというjQuery不要のスライダーがかなり便利だったので使い方をシェア。
基本的な使い方を解説しつつ、横幅いっぱいのスライダー実装方法を解説します。
» Swiper
完成形のイメージ図
こんな感じ。最近よく見かけますよね。
かっこいいし、スマホ最適化しやすいし素晴らしい。
参考:Trust at Airbnb
動作デモがこちら
これコピペすれば動くので、ここで解説終了でもいいですが、、、ちょろっと解説しますね。
CDNでスクリプト読み込み
まずはCDNでスクリプトを読み込みましょう。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
CSS
CSSがこちら。カスタマイズしやすいように最小限にしています。
.swiper-container {
width: 100%;
height: 370px;
}
.swiper-slide {
padding-top: 180px; /* 画像位置の調整用 */
text-align: center;
color: #fff;
font-size: 30px;
}
JavaScript
こんな感じ。これも最小限にしています。
var mySwiper = new Swiper ('.swiper-container', {
loop: true,
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
})
HTML
最後にHTMLです。
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide" style="
background-image: url('https://manablog.org/wp-content/uploads/2017/07/top.jpg');
background-repeat: no-repeat;
width: 1261px;
background-size: cover;
background-position: center center;">
Swiper is the best slider ever :)
</div>
<div class="swiper-slide">Slide 2</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
横幅いっぱいの画像は、CSSのbackground-imageを使っています。
※P.S:無料メルマガで発信中:過去の僕は「ブログ発信で5億円」を稼ぎました。次は「30億円」を目指します。挑戦しつつ、裏側の思考を「メルマガ」から発信します。不満足なら1秒で解約できます。無料登録は「こちら」です。