swiper在vue中正确的使用方法

Posted yang-hui

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了swiper在vue中正确的使用方法相关的知识,希望对你有一定的参考价值。

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‘
  }
},

  

以上是关于swiper在vue中正确的使用方法的主要内容,如果未能解决你的问题,请参考以下文章

vue-awesome-swiper的正确使用姿势

Swiper - 没有找到依赖打字稿,离子-vue

vue的swiper组件使用,获取当前滑动位置activeIndex

在vue中使用swiper4.x

vue 怎么挂载swiper

Swiper和Vue配合使用的问题——Vue的异步更新DOM