vue2使用Swiper轮播组件

小胖梅前端

已于 2022-11-23 16:07:56 修改

阅读量2.9k

点赞数 1

分类专栏： vue 文章标签： vue.js vue-swiper vue轮播图

于 2018-06-27 21:18:04 首次发布

本文链接：https://blog.csdn.net/xm1037782843/article/details/80835115

版权

vue 专栏收录该内容

30 篇文章 21 订阅

订阅专栏

1. 使用步骤

安装：注意版本

npm install swiper@5.x vue-awesome-swiper@4.x --save

2. main.js 导入文件

        import VueAwesomeSwiper from 'vue-awesome-swiper'

        import 'swiper/css/swiper.css'

        Vue.use(VueAwesomeSwiper)

3. 组件使用

<template>

     <swiper ref="mySwiper" :options="swiperOptions">

       <swiper-slide>Slide 1</swiper-slide>

       <swiper-slide>Slide 2</swiper-slide>

       <swiper-slide>Slide 3</swiper-slide>

       <swiper-slide>Slide 4</swiper-slide>

       <swiper-slide>Slide 5</swiper-slide>

       <div class="swiper-pagination" slot="pagination"></div>

     </swiper>

   </template>

4. 组件参数配置

<script>

      export default {

          name: 'carrousel',

          data() {

          return {

              swiperOptions: {

              pagination: {

                  el: '.swiper-pagination'

              },

              // Some Swiper option/callback...

              }

          }

          },

          computed: {

          swiper() {

              return this.$refs.mySwiper.$swiper

          }

          },

          mounted() {

            console.log('Current Swiper instance object', this.swiper)

            this.swiper.slideTo(3, 1000, false)

          }

      }

      </script>