swiper插件的簡單使用，實現圖片輪播

時間 2019-11-18

標籤 swiper 插件簡單使用實現圖片简体版

原文原文鏈接

移動端和p c端常常會遇到寫輪播圖的狀況，這裏只是簡單的說一下swiper插件的簡單用法（移動端爲例）。css

<!DOCTYPE html>html

<html lang="en">jquery

<head>app

<title>Title</title>插件

<script>htm

document.querySelector("html").style.fontSize = document.documentElement.clientWidth/375*50+"px";圖片

</script>

</head>

<body>

</div>

//輪播圖

$(document).ready(function () {

var mySwiper = new Swiper ('.swiper-container', {

direction: 'horizontal', //輪播方向

autoplay:2000, //自動輪播

loop: true, //循環

autoplayDisableOnInteraction : false //用戶操做後不中止

});

</script>

</body>

</html>

這樣一個簡單的輪播就實現啦，記得將圖片地址換掉哦，原生的輪播，有時間能夠寫起來。。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。