vue2.0使用swiper组件实现轮播的示例代码
更新时间：2018年03月03日 09:07:19 作者：Tony3820
下面小编就为大家分享一篇vue2.0使用swiper组件实现轮播的示例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
1、安装swiper
npm install swiper@3.4.1 --save-dev
2、引用组件
import Swiper from 'swiper'; import 'swiper/dist/css/swiper.min.css';
3、html页面代码
<div class="swiper-container" id="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item,$index) in detail.imgs">
<a v-on:click="showPreview($index,detail.imgs,swiperObj)">
<figure class="wp-avatar banner">
<img v-cloak :src="item | toQiNiuImg"/>
</figure>
</a>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
4、初始化组件，并设置参数
setTimeout(function () {
state.swiperObj = new Swiper('#swiper', {
loop: true,
pagination: '.swiper-pagination',
autoplay: 2000,
paginationClickable: true
});
}, 100)
5、搞定，ok
以上这篇vue2.0使用swiper组件实现轮播的示例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
下面小编就为大家分享一篇vue2.0 根据状态值进行样式的改变展示方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了vue组件props属性监听不到值变化问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了Vue使用axios发送请求并实现简单封装,主要包括安装axios及简单使用配置方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
详解mpvue scroll-view自动回弹bug解决方案
设置了scroll-top的scroll-view组件，在组件所在vue实例data发生改变时会自动回弹到最上方，非常具有实用价值，需要的朋友可以参考下2018-10-10
这篇文章主要介绍了Vue引入sass并配置全局变量的方法2018-06-06
本篇文章主要介绍了在 React、Vue项目中使用SVG的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
Vue使用pdf.js和docx-preview实现docx和pdf的在线预览
这篇文章主要为大家详细介绍了在Vue中使用pdf.js和docx-preview实现docx和pdf的在线预览的相关知识,文中的示例代码讲解详细,需要的可以参考下2025-03-03
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
这篇文章主要介绍了Vue使用路由钩子拦截器beforeEach和afterEach监听路由,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-11-11
在项目开发中,有两个功能特别类似,如果单独实现,会有很多重复的代码，这时候就会用到逻辑复用，本文主要介绍了vue3 逻辑复用的实现示例，具有一定的参考价值，感兴趣的可以了解一下2024-02-02
这篇文章主要介绍了Vue2.X 通过AJAX动态更新数据的方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-07-07
最新评论