Vue2+swiper基础实现轮播图

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

swiper的基础使用

提示：以下是本篇文章正文内容，下面案例可供参考

一、swiper官网

Swiper中文网-轮播图幻灯片js插件,H5页面前端开发

二、基础使用

1.创建Vue项目

vue create demo_vue

2.安装swiper插件

注意:我们用的是vue2所以推荐大家下载swiper5版本

npm install swiper@5

示例:

查看安装是否完成:

3.组件内引入css以及js

// 引入jsimport Swiper from "swiper";// 引入cssimport "swiper/css/swiper.min.css";

4.打开官网

官网上方导航栏的中文教程里面的Swiper使用方法

复制其html代码粘贴至组件:

Slide 1Slide 2Slide 3

复制其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",},});},};

写一些简单的样式:

.swiper{overflow: hidden;}.swiper-slide {text-align: center;background-color: aqua;}

结果:

Slide 1Slide 2Slide 3// 引入jsimport Swiper from "swiper";// 引入cssimport "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",},});},};.swiper{overflow: hidden;}.swiper-slide {text-align: center;background-color: aqua;}

更改配置项:

查阅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文档