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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容