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