Vue自定义横向轮播图

磨叽的鱼

已于 2024-08-20 17:34:10 修改

阅读量2.3k

点赞数 44

分类专栏：前端开发 # vue动态效果文章标签： css vue.js 前端 vue

于 2024-08-19 14:54:14 首次发布

本文链接：https://blog.youkuaiyun.com/qq_54855933/article/details/141324666

版权

前言

汇总一个最近写出来的效果，最新的设计稿里面要求实现一个轮播图，原本使用的Element-UI提供的轮播图不是很适配，所以选择自定义一个使用。文中附带代码实际效果演示视频。
大致需求就是：一行10个div（展示不全的默认隐藏），初始状态距屏幕左边240px，结束状态距屏幕右边240px，点击按钮，每次移动2个div宽度。

代码效果演示

在这里插入图片描述

详细代码

实现思路

将首尾空白的距离和10个div一起算作一个整体，每次移动的时候判断有没有到边界（即整个div左顶格或者右顶格）

轮播图实现代码

<template>  
    <div class="carousel-container">  
        <div class="carousel-wrapper" ref="carouselWrapper">  
            <div class="carousel-item" v-for="(item, index) in abilityData" :key="index">
                <div class="cover">
                    <div class="title">{
  {item.title}}</div>
                    <div class="subtitle">{
  {item.subtitle}}</div>
                    <div class="content">{
  {item.content}}</div>
                </div>
            </div>  
        </div>  
        <div class="btn-box">
            <div @click="moveLeft()">
                <img alt="左箭头" @mouseenter="leftHover()" @mouseleave="removeHover()" class="arrow-icon-left disabled" src="../assets/logo.svg" />
            </div>
            <div @click="moveRight()">
                <img alt="右箭头" @mouseenter="rightHover()" @mouseleave="removeHover()"  class="arrow-icon-right" src="../assets/logo.svg" />
            </div>
        </div>
    </div