vue中引入swiper vue-awesome-swiper插件

标签：from   hello   false   default   参考   mys   net   使用   class   

安装指定版本

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

组件中使用
这里我贴出在页面中使用方法，小伙伴们可以完全复制粘贴，复杂的东西我都简化掉了。 版本: vue@2.6.11，vue-awesome-swiper@3.1.3

<template>
    <div class="hello">
        <div class="recommendPage">
            <swiper :options="swiperOption" ref="mySwiper">
                <swiper-slide>I‘m Slide 1</swiper-slide>
                <swiper-slide>I‘m Slide 2</swiper-slide>
                <swiper-slide>I‘m Slide 3</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>
        </div>
    </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper"
import "swiper/dist/css/swiper.css"

export default {
    name: "HelloWorld",
    data() {
        return {
            swiperOption: {
                loop: true,
                autoplay: {
                    delay: 3000,
                    stopOnLastSlide: false,
                    disableOnInteraction: false
                },
                // 显示分页
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true //允许分页点击跳转
                },
                // 设置点击箭头
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev"
                }
            }
        }
    },
    components: {
        swiper,
        swiperSlide
    },
    computed: {
        swiper() {
            return this.$refs.mySwiper.swiper
        }
    },
    mounted() {
        // current swiper instance
        // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
        console.log("this is current swiper instance object", this.swiper)
        // this.swiper.slideTo(3, 1000, false);
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

参考地址：https://blog.csdn.net/u012570307/article/details/107203851/

vue中引入swiper vue-awesome-swiper插件

标签：from   hello   false   default   参考   mys   net   使用   class   

原文地址：https://www.cnblogs.com/lhongsen/p/14897888.html