2017/07/02

【Swiper】横幅100%のスライダー画像を実装する方法【jQuery不要】

JavaScript PROGRAMMING

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を使っています。

JavaScript