關於Swiper觸摸滑動的小應用

現在大家在做手機H5時經常到用到需要手動或自動滑動顯示內容，之前多用輪播圖的方式，但是比起可以由用戶手動控制的方式顯示體驗上差不了不少。現在正好用到Swiper，在此分享個小例子供大家參考，如果想了解更多關於Swiper的應用，可查看官網https://www.swiper.com.cn

使用時首先需要下載庫並引入，下載地址：https://www.swiper.com.cn/download/index.html

 <script type="text/javascript">
        $(function () {
            //輪播圖
            var swiper = new Swiper('.swiper-container-top', {
				loop:true,//開啓無限循環
				autoplay: {
			    delay: 3000,//停留秒數
			    stopOnLastSlide: false,
			    disableOnInteraction: false,
				},
			speed: 300,//滾動速度
                pagination: {
                    el: '.swiper-pagination-top',
                },
            });

        })
    </script>

CSS樣式

.swiper-container-top .swiper-slide {
    height: 5.68rem;
}
.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
}

HTML代碼

<div class="swiper-container swiper-container-top">
        <div class="swiper-wrapper">
			
<div class="swiper-slide"><a href="#"><img src="圖片路徑"></a></div>
 <div class="swiper-slide"><a href="#"><img src="圖片路徑"></a></div>
 <div class="swiper-slide"><a href="#"><img src="圖片路徑"></a></div>
 <div class="swiper-slide"><a href="#"><img src="圖片路徑"></a></div>
            
        </div>
        <div class="swiper-pagination swiper-pagination-top"></div>
    </div>