swiper輪播圖切換
阿新 • • 發佈:2019-01-10
<!-- html輪播 -->
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide phone"><img src="images/3.png" alt=""></div> <div class="swiper-slide phone"><img src="images/2.png" alt=""></div> <div class="swiper-slide phone"><img src="images/1.png" alt=""></div> </div> </div> <script src="js/swiper-3.4.2.jquery.min.js"></script>
<script>
var mySwiper = new Swiper ('.swiper-container', {
slidesPerView: 1,
pagination: '.swiper-pagination',
paginationClickable: true,
paginationType:'custom',
spaceBetween: 30,
autoplay:2000,
loop: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev'
})
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide phone"><img src="images/3.png" alt=""></div> <div class="swiper-slide phone"><img src="images/2.png" alt=""></div> <div class="swiper-slide phone"><img src="images/1.png" alt=""></div> </div> </div>
<!-- js自動播放 -->
<script>
var mySwiper = new Swiper ('.swiper-container', {
slidesPerView: 1,
pagination: '.swiper-pagination',
paginationClickable: true,
paginationType:'custom',
spaceBetween: 30,
autoplay:2000,
loop: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev'
})
</script>
style樣式
<link rel="stylesheet" href="css/swiper-3.4.2.min.css">