官方網站
下載位置
https://unpkg.com/browse/swiper@6.5.0/
示範DEMO
Import JS & CSS
<!-- Import jquery & swiper -->
<script src="jquery-3.4.1.min.js"></script>
<script src="swiper-bundle.min.js"></script>
<link rel="stylesheet" href="swiper-bundle.min.css">
HTML 部份
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<!-- Slide1 -->
<img src="1.png" alt="slide 1 image">
</div>
<div class="swiper-slide">
<!-- Slide2 -->
<img src="2.png" alt="slide 2 image">
</div>
<div class="swiper-slide">
<!-- Slide3 -->
<img src="3.png" alt="slide 3 image">
</div>
<div class="swiper-slide">
<!-- Slide4 -->
<img src="4.png" alt="slide 4 image">
</div>
<div class="swiper-slide">
<!-- Slide5 -->
<img src="5.png" alt="slide 5 image">
</div>
<div class="swiper-slide">
<!-- Slide6 -->
<img src="6.png" alt="slide 6 image">
</div>
</div>
<!-- If need pagination -->
<div class="swiper-pagination"></div>
<!-- If need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
CSS 部份
<style>
.swiper-container {
width: 600px;
height: 300px;
}
img {
width: auto;
height: 100%;
}
</style>
Swiper API Doucment
JS 部份
$(function () {
const swiper = new Swiper('.swiper-container', {
//Optional parameters
direction: 'horizontal', //vertical
loop: true,
slidesPerView:2,
autoplay:true,
effect: 'fade', //slide,coverflow.....
//If need pagination
pagination: {
el: '.swiper-pagination'
},
//Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
//If need scrollbar
scrollbar: {
el: '.swiper-scrollbar'
}
});
});