Vue使用Swiper组件（1）

官方文档我简单翻译一下给自己看
Swiper Vue.js plugin is available only via NPM as a part of the main Swiper library，
通过npm下载，只能使用Swiper的一部分功能，很多其他功能需要自己额外下载。
Note, Swiper Vue.js component will create required elements for Navigation, Pagination and Scrollbar if you pass these params without specifying its elements (e.g. without navigation.nextEl, pagination.el, etc.)
使用这些组件时，如果你自己不创建元素，那么swiper会自己创建可用的元素。

image.png
css是bundle版本，即打包版本，包括了所有的组件样式，而less和scss可以根据所需来使用。

sherry慈的swiper

1. npm install swiper vue-awesome-swiper --save 下载
   这里下载了两个，一个是swiper，一个是awesome。对于使用vue的人而言，使用的是awesome。vue-awesome-swiper是基于swiper封装的vue插件。
   （一个小坑）
   官网是这样的
   但是其中的导入 ‘swiper/vue’，如果这么使用，会提醒组件找不到。

import { swiper, swiperSlide } from 'vue-awesome-swiper';局部应该这么用

在全局main.js中：这么注册

import VueAwesomeSwiper from 'vue-awesome-swiper';
Vue.use(VueAwesomeSwiper);

引入样式

基本使用，更多细节点击上面的链接

<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>

<script>
    export default {
        name: 'carrousel',
        data() {
            return {
                swiperOptions: {
                    autoplay: true, // 自动轮播  
                    speed: 1000,   // 轮播速度
                    pagination: {
                        el: '.swiper-pagination'
                    },
                    on: {
                        slideChangeTransitionEnd: function() {
                            // ...
                        }
                    }
                    // 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> 

更多的API
官方github

简单使用.png