提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
swiper的基础使用
提示:以下是本篇文章正文内容,下面案例可供参考
一、swiper官网
Swiper中文网-轮播图幻灯片js插件,H5页面前端开发
二、基础使用
1.创建Vue项目
vue create demo_vue
2.安装swiper插件
注意:我们用的是vue2所以推荐大家下载swiper5版本
npm install swiper@5
示例:
查看安装是否完成:
3.组件内引入css以及js
// 引入js
import Swiper from "swiper";
// 引入css
import "swiper/css/swiper.min.css";
4.打开官网
官网上方导航栏的中文教程里面的Swiper使用方法
复制其html代码粘贴至组件:
<template>
<div>
<div class="swiper">
<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 class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
</div>
</template>
复制其js代码粘贴至组件:
export default {
name: "",
mounted() {
var mySwiper = new Swiper(".swiper", {
// direction: "vertical", // 垂直切换选项
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: ".swiper-pagination",
},
// 如果需要前进后退按钮
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
// 如果需要滚动条
scrollbar: {
el: ".swiper-scrollbar",
},
});
},
};
写一些简单的样式:
<style scoped>
.swiper{
overflow: hidden;
}
.swiper-slide {
text-align: center;
background-color: aqua;
}
</style>
结果:
<template>
<div>
<div class="swiper">
<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 class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
</div>
</template>
<script>
// 引入js
import Swiper from "swiper";
// 引入css
import "swiper/css/swiper.min.css";
export default {
name: "HelloWorld",
mounted() {
var mySwiper = new Swiper(".swiper", {
// direction: "vertical", // 垂直切换选项
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: ".swiper-pagination",
},
// 如果需要前进后退按钮
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
// 如果需要滚动条
scrollbar: {
el: ".swiper-scrollbar",
},
});
},
};
</script>
<style scoped>
.swiper{
overflow: hidden;
}
.swiper-slide {
text-align: center;
background-color: aqua;
}
</style>
更改配置项:
查阅api文档里面的配置项
示例:autoplay:true 设置是否自动轮播
var mySwiper = new Swiper(".swiper", {
// direction: "vertical", // 垂直切换选项
loop: true, // 循环模式选项
autoplay:true, //自动轮播
// 如果需要分页器
pagination: {
el: ".swiper-pagination",
},
// 如果需要前进后退按钮
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
// 如果需要滚动条
scrollbar: {
el: ".swiper-scrollbar",
},
});
设置自动轮播的时间间隔: autoplay: { delay: 1000,//1秒切换一次 }
var mySwiper = new Swiper(".swiper", {
// direction: "vertical", // 垂直切换选项
loop: true, // 循环模式选项
autoplay: {
delay: 1000, //1秒切换一次
},
// 如果需要分页器
pagination: {
el: ".swiper-pagination",
clickable: true, //设置小球是否能点
},
// 如果需要前进后退按钮
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
// 如果需要滚动条
scrollbar: {
el: ".swiper-scrollbar",
},
});
设置分页器(轮播图下面的小圆点是否能点击切换):clickable: true
var mySwiper = new Swiper(".swiper", {
// direction: "vertical", // 垂直切换选项
loop: true, // 循环模式选项
autoplay:true, //自动轮播
// 如果需要分页器
pagination: {
el: ".swiper-pagination",
clickable: true, //设置小球是否能点
},
// 如果需要前进后退按钮
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
// 如果需要滚动条
scrollbar: {
el: ".swiper-scrollbar",
},
});
更多请翻阅api文档