vue2.0 使用transition-group制作的轮播图 方向可控

直接上代码:

<style lang="less">
    #ban{
        .group{
            position: relative;
            overflow: hidden;
            height: 400px;
            width: 100%;

            li{
                position: absolute;
                width: 100%;
                height: 100%;
                background: rgb(245, 201, 201);
            }
        }

        .listItem{
            li{
                display: inline-block;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                margin: 10px;
                background: #000;
                cursor: pointer;
            }
        }
    }

</style>

<template>
    <div id="ban">
        <transition-group
            tag="ul"
            class="group"
            name="list"
            v-on:enter="enter"
            v-on:leave="leave"