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>
CSS
<style type="text/css">
.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>
コメント