关于vue.js:vueawesomeswiper使用

42次阅读

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

vue-awesome-swiper

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


装置

自己阐明一点:为什么不必 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>

A 组

我最喜爱的轮播这款,在我的 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>

正文完
 0