[jQuery]Swiperで背景画像のスライドサンプル

jQueryプラグイン・ライブラリ

2020.12.01

jQuery
CSS
HTML

jQuery

<script src="jquery.min.js"></script>
<script src="Swiper-3.3.1/dist/js/swiper.min.js"></script>
<script>
	var swiper = new Swiper('.swiper-container', {
		pagination: '.swiper-pagination',
		paginationClickable: true,
		nextButton: '.swiper-button-next',
		prevButton: '.swiper-button-prev',
		spaceBetween: 30,
		effect: 'fade'
	});
</script>

var swiper = new Swiper('.swiper-container', {

pagination: '.swiper-pagination',

paginationClickable: true,

nextButton: '.swiper-button-next',

prevButton: '.swiper-button-prev',

spaceBetween: 30,

effect: 'fade'

});

</script>

CSS

<style type="text/css">
.swiper-container {
	width: 100%;
}

.swiper-slide {
	background-position: center;
	background-size: cover;
}
</style>

.swiper-container {

width: 100%;

}

.swiper-slide {

background-position: center;

background-size: cover;

}

</style>

HTML

<link rel="stylesheet" href="Swiper-3.3.1/dist/css/swiper.min.css">
<div class="swiper-container">
	<div class="swiper-wrapper">
		<div class="swiper-slide" style="background-image:url(img1.jpg)"></div>
		<div class="swiper-slide" style="background-image:url(img2.jpg)"></div>
		<div class="swiper-slide" style="background-image:url(img3.jpg)"></div>
		<div class="swiper-slide" style="background-image:url(img4.jpg)"></div>
		<div class="swiper-slide" style="background-image:url(img5.jpg)"></div>
	</div>
	<div class="swiper-pagination swiper-pagination-white"></div>
	<div class="swiper-button-next swiper-button-white"></div>
	<div class="swiper-button-prev swiper-button-white"></div>
</div>