轮播图swiper基本属性

首先要先安装swiper

运用cmd命令行 先初始化npm init -y

然后安装swiper

npm i swiper@(版本号)

引入swiper

轮播图swiper基本属性

 

 HTML5代码

轮播图模板

轮播图swiper基本属性

 

 js代码

轮播图swiper基本属性

autoplay属性

自动切换

<script>
var mySwiper = new Swiper('.swiper', {
  autoplay:true
});
</script>

 

 loop属性  

轮播图循环

<script> 
  var mySwiper = new Swiper('.swiper',{
    loop : true,
  })
</script>
pagination属性
分页器

轮播图swiper基本属性

 

 轮播图swiper基本属性

 

 分页器。如果放置在swiper外面,需要自定义样式。

navigation属性

切换按钮

轮播图swiper基本属性

 

 轮播图swiper基本属性

 

上一篇:使用swiper制作轮播图


下一篇:golang学习笔记6 beego项目路由设置