首页 > 其他 > 详细

vue中使用swiper

时间:2020-03-15 23:53:44      阅读:122      评论:0      收藏:0      [点我收藏+]

1.安装swiper,执行npm install vue-awesome-swiper --save命令

2.在main.js中添加下面三行

import ‘swiper/dist/css/swiper.css‘
import VueAwesomeSwiper from ‘vue-awesome-swiper‘
Vue.use(VueAwesomeSwiper)  

 3.在html部分添加:

<swiper :options="swiperOption">
  <swiper-slide>slide1</swiper-slide>
  <swiper-slide>slide2</swiper-slide>
  <div class="swiper-pagination" slot="pagination"></div>
  <div class="swiper-button-prev" slot="button-prev"></div>
  <div class="swiper-button-next" slot="button-next"></div>
</swiper>

4.将下面js部分添加到data里面:

swiperOption: {
  pagination: {
    el: ‘.swiper-pagination‘,
    clickable: true // 允许点击小圆点跳转
  },
  autoplay: {
    delay: 3000,
    disableOnInteraction: false // 手动切换之后继续自动轮播
  },
  loop: true,
  navigation: {
    nextEl: ‘.swiper-button-next‘,
    prevEl: ‘.swiper-button-prev‘
  }
},

 转载自:https://www.cnblogs.com/yang-hui/p/10627605.html

vue中使用swiper

原文:https://www.cnblogs.com/codexlx/p/12500810.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!