关于vue.js:vueawesomeswiper使用

47次阅读

共计 1172 个字符，预计需要花费 3 分钟才能阅读完成。

我喜爱的一款轮播插件，他有多个抉择！而且反对手持滑动
所以我用到了明天。

自己阐明一点：为什么不必 4.1.1
答：vue-awesome-swiper v4.1.1 版 autoplay、effect 等有效问题至今未解决

cnpm i vue-awesome-swiper@3.1.3 -S

全局引入

import VueAwesomeSwiper from 'vue-awesome-swiper' 
import 'swiper/dist/css/swiper.css' 
Vue.use(VueAwesomeSwiper)

独自引入

import Vue from 'vue'
import {swiper, swiperSlide} from 'vue-awesome-swiper'
import "swiper/dist/css/swiper.css"
// 或者
require('swiper/dist/css/swiper.css')

测试

<template>
  <swiper class="swiper">
    <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>
    <swiper-slide>Slide 6</swiper-slide>
    <swiper-slide>Slide 7</swiper-slide>
    <swiper-slide>Slide 8</swiper-slide>
    <swiper-slide>Slide 9</swiper-slide>
    <swiper-slide>Slide 10</swiper-slide>
  </swiper>
</template>

我最喜爱的轮播这款，在我的 MXLOGO 保留至今！然而很快辞别了
因为我要更新 MXLOGO 8.

        <swiper :options="swiperOption">
            <swiper-slide>
                <a href="XXXXXX" target="_blank">
                      <img src="./assets/1.jpg">
                </a>
            </swiper-slide>
            <swiper-slide>
                <a href="XXXXXX" target="_blank">
                    <img src="./assets/1.jpg">
                </a>
            </swiper-slide>
            <swiper-slide>
                <a href="XXXXXX" target="_blank">
                    <img src="./assets/1.jpg">
                </a>
            </swiper-slide>
        </swiper>

正文完