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

最新推荐文章于 2024-09-25 15:49:24 发布

置顶

Hua929323125

最新推荐文章于 2024-09-25 15:49:24 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/Hua929323125/article/details/85319341

版权

本文通过Vue2.0的transition-group组件结合Velocity.js，实现了一个可以控制滑动方向的轮播图。轮播图支持循环播放，点击按钮或小圆点时，能够根据用户选择的方向（上一张或下一张）进行向左或向右的平滑过渡效果。

摘要由CSDN通过智能技术生成

直接上代码:

<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"