Vue自定义轮播图

目录

• • 前言
  • 代码效果演示
  • 详细代码
  • • 实现思路
    • 轮播图实现代码
    • 组件使用代码

前言

    汇总一个最近写出来的效果，最新的设计稿里面要求实现一个轮播图，原本使用的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