Easy-swiper-new NPM

easy-swiper-new

简易 swiper 组件

使用方法

install

npm install easy-swiper-new --save
yarn add easy-swiper-new

Registration

import Vue from 'vue'    
import Swiper from "easy-swiper-new";    
import swiperItem from "easy-swiper-new";    

import "../node_modules/easy-swiper-new/simple-swiper.css";    
Vue.use(Swiper).use(swiperItem)

Properties

Prop	Type	Description	Default
loop	boolean	是否可以无限滚动	false
autoplay	number/boolean	是否自动轮播	false
initialSlide	number	轮播图默认下标	0
spaceBetween	number	滑块的间距	0
speed	number	滑动速度，即slider自动滑动开始到结束的时间	300ms
customOffsetY	number	滑块的Y轴偏移量	0
touchRatio	number	触摸距离与slide滑动距离的比例	1
canContinuitySlide	boolean	是否可以一次滑动多个滑块	true
slideToClickedSlide	boolean	设置为true则点击slide会过渡到这个slide。	false
effect	string	当前使用轮播类型(cardScreen/coverflow)	cardScreen

Functions

Name	Type	Description
swiperTo	num, speed	跳转到指定下标位置(speed可选，切换速度)
slideNext	speed	滑动到下一个滑块(speed可选，切换速度)
slidePrev	speed	滑动到前一个滑块(speed可选，切换速度)

Callbacks

@changeSlide="changeSlide" swiper从一个slide过渡到另一个slide结束时执行，回调接收当前swiper的下标

Component

<template>
    <Swiper
    :options="swiperOption"
    ref="mySwiper"
    @changeSlide="changeSlide"
    >
    <SwiperItem
        v-for="(item, index) in list"
        :width="140"
        :key="item.img"
    >
        <img :src="item.img" alt="" />
        <span>{{ index }}</span>
    </SwiperItem>
    </Swiper>
</template>
<script>
export default {
    name: 'mySwiper',
    data() {
    return {
        list:[],
        swiperOption: {
            loop: true, // 是否循环切换
            initialSlide: 0,
            canContinuitySlide: false,
            spaceBetween: 20,
            effect: "cardScreen",
            pagination: {
                el: '.swiper-pagination'
            },
            // Some Swiper option/callback...
        }
    }
    },
    computed: {
        swiper() {
            return this.$refs.mySwiper.swiper
        }
    },
}
</script>

@everything-registry/sub-chunk-1548

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago