hcg-swipe

``` npm install hcg-swipe --save yarn add hcg-swipe --save ```

Usage no npm install needed!

<script type="module">
  import hcgSwipe from 'https://cdn.skypack.dev/hcg-swipe';
</script>

README

HSwipe

安装方式：

npm install hcg-swipe --save
yarn add hcg-swipe --save

使用方法：

vue-cli脚手架工具中

<template>
    <div class="h-swipe-container" ref="swipe">
        <ul class="h-swipe-wrapper">
            <li class="h-swipe-slide" v-for="item in swipeList" :key="item">
                {{item}}
            </li>
        </ul>
        <div class="h-swipe-pagination"></div>
    </div>
</template>

<script>
    import HSwipe from 'hcg-swipe';

    export default {
        name: "Swipe",
        data() {
            return {
                swipeList: [1,2,3,4,5]
            }
        },
        mounted() {
            this.swipe = new HSwipe({
                el: this.$refs['swipe'],
                pagination: true
            });
        },
        updated() {
            this.$nextTick(() => {
                this.swipe.refresh();
            });
        },
        beforeDestroy() {
            this.swipe = this.swipe.off();
        }
    }
</script>

<style>
    * {
        margin: 0;
        padding: 0;
        list-style:none;
    }
    .h-swipe-slide {
        height: 350px;
        background: #eee;
        text-align: center;
        line-height: 350px;
        font-size: 50px;
        border: 1px solid #fff;
        box-sizing: border-box;
    }
</style>

在html文件中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style:none;
        }
        .h-swipe-slide {
            height: 350px;
            background: #eee;
            text-align: center;
            line-height: 350px;
            font-size: 50px;
            border: 1px solid #fff;
            box-sizing: border-box;
        }
    </style>
    <script src="hcg-swipe/HSwipe.min.js"></script>
</head>
<body>
    <div class="h-swipe-container">
        <ul class="h-swipe-wrapper">
            <li class="h-swipe-slide">1</li>
            <li class="h-swipe-slide">2</li>
            <li class="h-swipe-slide">3</li>
            <li class="h-swipe-slide">4</li>
            <li class="h-swipe-slide">5</li>
        </ul>
        <div class="h-swipe-pagination"></div>
    </div>
</body>
<script>
    let swipe = new HSwipe({
        el: '.h-swipe-container',
        pagination: true,
        transitionEnd(index) {
            console.log(index)
        }
    });
</script>
</html>

配置参数

/**
 * @param {HTMLElement|String} option.el 轮播图外层容器，默认为 h-swipe-container
 * @param {HTMLElement|String} option.wrapper 自定义轮播图wrapper容器选择器，默认为 h-swipe-wrapper
 * @param {HTMLElement|String} option.slide 自定义轮播图slide容器选择器，默认为 h-swipe-slide
 * @param {Number} option.activeIndex 自定义轮播图初始显示的图像，默认为 0
 * @param {Number} option.duration  自定义动画消耗时间，默认800毫秒
 * @param {Number} option.interval  自定义每帧停留时间，默认2000毫秒
 * @param {Object|Boolean} option.pagination 选择配置分页器，传入true则使用默认选项
 * @param {String} option.pagination.el 分页器选择器，默认el为 .h-swipe-pagination
 * @param {String} option.pagination.tagName  分页器生成的标签，默认生成span标签
 * @param {String} option.pagination.pageName  分页器的使用类名，默认使用 h-swipe-page-btn
 * @param {String} option.pagination.activeClass 分页器激活使用的类名，默认激活使用active类名
 * @param {Function} option.transitionEnd 每次动画执行完成之后的回调函数，第一个参数为当前激活的索引
 * */

可以使用的方法：

swipe.refresh(); // 实例上的方法，刷新结构,并重新开始轮播
swipe.off(); // 实例上的方法，关闭swipe
swipe = swipe.off(); // 彻底清除swipe实例