zqz-carousel

Carousel plugin

repository

https://github.com/Chowqz/zqz-carousel

Install

npm install zqz-carousel --save

Usage

HTML structure

<div class="carousel">
    <ul class="carousel-list">
        <li class="carousel-item">
            <img src="./images/image01.jpg" alt="">
        </li>
        <li class="carousel-item">
            <img src="./images/image02.jpg" alt="">
        </li>
        <li class="carousel-item">
            <img src="./images/image03.jpg" alt="">
        </li>
        <li class="carousel-item">
            <img src="./images/image04.jpg" alt="">
        </li>
        <li class="carousel-item">
            <img src="./images/image05.jpg" alt="">
        </li>
    </ul>
    <div class="carousel-btn prev-btn"></div>
    <div class="carousel-btn next-btn"></div>
</div>

JS core

import Carousel from 'zqz-carousel'
let instance = new Carousel({
    el: document.querySelector('.carousel'),
    options: {
        width: 900,
        itemWidth: 640,
        height: 360
    }
})

Props

参数	说明	类型	可选值	默认值
width	整个组件宽度	Number	-	100%
itemWidth	第一帧的宽（须小于width）	Number	-	''
height	组件高度	Number	-	''
scale	基于前一帧的缩放比例	Number	-	0.9
duration	旋转一次的动画时间（ms）	Number	-	500
delay	动画的间隔时间（ms）	Number	-	3000
verticleAlign	垂直方向对齐方式	String	top/middle/bottom	middle
autoPlay	是否自动播放	Boolean	true/false	true
timingFun	过渡效果的速度曲线	String	linear/ease/ease-in/ease-out/ease-in-out	ease