插件vue-awesome-swiper(----------vue轮播图绝佳Travel项目使用)

旧城等待， 2021-10-09 04:26 405阅读 0赞

vue-awesome-swiper

vue-awesome-swiper资源地址：[轮播图github][github]

swiper2.x官方使用文档: [swiper2官方文档API][swiper2_API]

全部配置的说明文档: [swiper3.x配置文档][swiper3.x]

使用：

１．先npm install依赖(我用的2.6.7版本)

npm install vue-awesome-swiper@2.6.7 --save

2.全局引入的方法:   在main.js里面加入:

import Vue from 'vue'
    import VueAwesomeSwiper from 'vue-awesome-swiper'
    
    // require styles
    import 'swiper/dist/css/swiper.css'
    
    Vue.use(VueAwesomeSwiper, /* { default global options } */)

ps  :还有以组件形式引入的方法(见github):

// require styles
    import 'swiper/dist/css/swiper.css'
    
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    
    export default {
      components: {
        swiper,
        swiperSlide
      }
    }

3.在组件里使用:

<template>
      <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
        
        <swiper-slide>I'm Slide 1</swiper-slide>
        <swiper-slide>I'm Slide 2</swiper-slide>
        <swiper-slide>I'm Slide 3</swiper-slide>
        <swiper-slide>I'm Slide 4</swiper-slide>
        <swiper-slide>I'm Slide 5</swiper-slide>
        <swiper-slide>I'm Slide 6</swiper-slide>
        <swiper-slide>I'm Slide 7</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>   //右边箭头
        <div class="swiper-scrollbar"   slot="scrollbar"></div>     //滚动轴
      </swiper>
    </template>

要在组件的data()\{ \}里面把swiperOption 选项写上所需要的内容,要循环显示: loop: true,分页:pagination

![70][]

多看文档多看文档多看文档!

[github]: https://github.com/surmon-china/vue-awesome-swiper
[swiper2_API]: http://2.swiper.com.cn/usage/index.html
[swiper3.x]: http://www.swiper.com.cn/api/start/2014/1218/140.html
[70]: /images/20211009/a49119b2fa8a475896a8dbb460682c10.png