<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>年會網</title>
<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
<link rel="stylesheet" type="text/css" href="css/common.css" />
<style type="text/css">
.swiper-container {
width: 600px;
height: 300px;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<div class="swiper-pagination"></div>
</div>
</body>
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal', //2.Slides的滑動方向，可設置水平(horizontal)或垂直(vertical)；
initialSlide: 0, //3.初始化顯示的swiper-slide，從下標爲0的swiper-slide開始，默認爲0；
speed: 300, //4.切換速度，即slider自動滑動開始到結束的時間（單位ms），也是觸摸滑動時釋放至貼合的時間,默認300。
width: 500,
height: 500, //5.制Swiper的高/寬度(px)，當你的Swiper在隱藏狀態下初始化時且切換方向爲垂直才用得上。這個參數會使自適應失效。
autoHeight: true, //6.自動高度。設置爲true時，wrapper和container會隨着當前slide的高度而發生變化。
preloadImages: true, //7.默認爲true，Swiper會強制加載所有圖片。
preventClicksPropagation: false,//阻止click冒泡。拖動Swiper時阻止click事件。
autoplay: { //8.自動播放
delay: 3000, //8.1自動播放間隔時間
stopOnLastSlide: false, //8.2切換到最後一個是否停止，但是在loop:true下無效果；
disableOnInteraction: true, //8.3用戶觸碰,懸停，拖放是否自動播放停止，默認爲true;
reverseDirection: false, //8.4 是否開啓反向輪播，默認爲false
},
//顯示小圓點
pagination: {
el: '.swiper-pagination',
clickable: true, //點擊小圓點切換
// 不加以下兩行無法手動滑動
observer:true,//修改swiper自己或子元素時，自動初始化swiper
observeParents:true,//修改swiper的父元素時，自動初始化swiper
},
})
</script>
</html>