Vue安装使用Swiper，做轮播图

swiper所有版本中swiper4的兼容性是最好的，组件在 swiper4之后没有很大改变，使用时最好选择swiper4。

1.安装

npm install swiper@4.5.1 --save-dev

cnpm install swiper@4.5.1 --save-dev

cnpm安装快速，也不会出现问题

2.main.js引入

import 'swiper/dist/css/swiper.min.css'
import 'swiper/dist/js/swiper.min'

3.使用代码

轮播图效果

完整代码：

样式懒得调了，效果出来就行了，(●'◡'●)

<template><div class="container"><div class="containerBox"><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide" v-for="(item, index) in pointImgList" :key="index"><a  target="_blank" :href="item.url"><div class="pic"><img class="img" :src="item.thumb1" alt="" style="height:500px; width:400px"></div></a>      </div></div><div class="swiper-pagination"></div></div></div></div>
</template><script>
import Swiper from "swiper"
export default {data() {return {pointImgList:[{thumb1: require('../assets/img/big_advert.jpg'),},{thumb1: require('../assets/img/banner_img5.jpg'),},{thumb1: require('../assets/img/About_bj.jpg'),},{thumb1: require('../assets/img/banner_img5.jpg'),},]}},mounted() {this.bannerPoint()},created() {},methods: {bannerPoint(){new Swiper(".swiper-container", {loop: true,autoplay: {delay: 5000, //1秒切换一次disableOnInteraction: false},updateOnImagesReady: true,slidesPerView: 3,spaceBetween: 20,//spaceBetween : '10%',按container的百分比observer: true,observeParents: true,observeSlideChildren: true,pagination: {el: ".swiper-pagination",clickable :true,},})}},
}</script><style>
.containerBox{width: 1500px;margin: 50px auto;
}
</style>

分页器，滚到条，前进后退按钮等如果需要，可以引入

swipe官方文档地址：中文api - Swiper中文网通过在线演示直观地了解Swiper3.x的基础配置、使用方法。查看中文API了解Swiper3.x的参数、属性、事件、回调函数等。https://www.swiper.com.cn/api/index.html

Vue安装使用Swiper，做轮播图相关推荐

flutter CustomScrollView中使用Swiper做轮播图问题
有朋友问我CustomScrollView中使用Swiper做轮播图问题以前没这么用过,也是才发现CustomScrollView 与 Swiper 冲突,直接报错. 网友说修改源码,试过不能用,但 ...
Vue 项目中 Swiper(5) 轮播图分页器 swiper-pagination 无法显示问题（解决方案集合）
最近用Vue做项目需要加个轮播效果,安装swiper后,结果分页器死活出不来,但轮播效果和前进后退箭头以及滚动栏都是正常显示的,默认安装的是最新版本swiper@6.4.5,这可把我难住了. < ...
利用swiper在vue中做轮播图，并改变轮播图的原有箭头、图片等内容
目标:利用swiper在vue中做轮播图,并改变轮播图的原有箭头.图片等内容. 实现效果:1.点击左右箭头可切换图片. 2.点击后图片出现最左侧样式效果,只有被点击的图片有此效果,不被点击恢复默认效果 ...
Vue —— mockjs 模拟数据、轮播图插件 Swiper
mockjs 的使用项目安装 mockjs : cnpm install mockjs 使用步骤 (1)在项目 src 下创建 mock 文件夹. (2)mock 文件夹准备相应的 JSON 数据文 ...
HTML视频能不能做成轮播图,vue.js能做轮播图吗？
vue.js能做轮播图吗?答案是:可以.下面本篇文章给大家通过实例介绍一下使用vue.js做轮播图.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 最近新学习了vuejs,尝试着用v ...
在vue项目中使用v-show控制元素隐藏导致swiper的轮播图及分页无法正常显示
一.需求问题在之前的项目开发中,使用了swiper插件.由于是vue项目,对于swiper的轮播图我们使用了v-show命令,进行动态隐藏与显示.只有当点击进行一些操作以后,swiper的轮播图才会 ...
用js和jQuery做轮播图
Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...
Vue 组件封装之 Carousel 轮播图
Vue 组件封装之 Carousel 轮播图一.Carousel 轮播图组件二.使用案例三.API 使用指南四.源代码一.Carousel 轮播图组件组件说明: 实现无缝轮播. 效果展示: ...
微信小程序vue轮播图_微信小程序-swiper（轮播图）抖动问题
ps:问题组件swiper(轮播图)真机上不自动滚动一直卡在那里抖动以前遇到这个问题,官方一直没有正面回复.就搁置了,不过有大半年没写小程序了也没去关注,今天就去看了下官方文档,发觉更新了点好东 ...

Vue安装使用Swiper，做轮播图

Vue安装使用Swiper，做轮播图相关推荐

最新文章

热门文章