关于vue.js:vueawesomeswiper使用

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>

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理