element-plus实现轮播图和缩略图联动

使用的是element-plus的走马灯组件加一些脚本实现。

swiper是有这个deom的，算是仿swiper功能。没有搞无限轮播，无限轮播可以用swiper。

以下是效果：

https://i-blog.csdnimg.cn/direct/09225e1ad2d44f40b19d97e6efbb511e.gif

下面是代码：

模板部分

<template>
  <div class="gallery">
    <div class="carousel">
      <el-carousel
        ref="carousel"
        :v-model="2"
        trigger="click"
        height="280px"
        indicator-position="none"
        :loop="false"
        :autoplay="false"
        @change="handleChange"
        >
        <el-carousel-item v-for="item in imgs" :key="item">
          <img :src="item" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div style="width: 280px;overflow: hidden;">
      <ul class="thumbs" :style="`transform: translateX(-${triggerOffsetX}px)`">
        <li v-for="(url, index) in imgs" :key="index"  @click="setCarouselItem(index)" :class="activeIndex === index ? 'active' : ''">
          <img :src="url" />
        </li>
      </ul>
    </div>
  </div>
</template>

脚本部分

<script setup lang="ts">
import { ref } from 'vue'
import type { CarouselInstance } from 'element-plus'
 
const carousel = ref<CarouselInstance | null>(null)
//换成你自己的图片list我这里是直接填充了
const imgs = ref(new Array(7).fill('/assets/img/op_1718863151.png'))
const triggerOffsetX = ref(0)
const activeIndex = ref(0)
 
const handleChange = (current: number) => {
    //保存轮播索引
  activeIndex.value = current
    //索引大于等于5就触发缩略模块滑动
 if(current >= 5) { 
    //5是缩略图最多可展示几张,48是通过缩略图的宽度和边距计算出,具体数值看自己需求
    triggerOffsetX.value = (imgs.value.length - 5 - 1) * 48 
    //小于5回到初始位置
 }else if(current < 5) {
  triggerOffsetX.value = 0
 }
}
    //点击缩略图同步轮播图索引
const setCarouselItem = (index: number) => {
  carousel.value?.setActiveItem(index)
}
</script>

样式部分

 
<style scoped lang="scss">
   .gallery {
      width: 100%;
      overflow: auto;
      .carousel{
        border-radius: 12px;
        width: 100%;
        height: 280px;
        overflow: hidden;
      }
      .el-carousel__arrow{
        width: 24px;
        height: 36px;
        border-radius: 12px;
      }
      .el-carousel__item{
        img{
          width: 100%;
          height: 100%;
        }
      }
      .thumbs{
        overflow: hidden;
        zoom: 1;
        width: 1000px;
        margin-top: 7px;
        transition: all 0.5s;
        padding: 1px 0;
        li{
          width: 40px;
          height: 40px;
          margin-right: 8px;
          float: left;
          border-radius: 6px;
          overflow: hidden;
          cursor: pointer;
          img{
            width: 100%;
            height: 100%;
          }
          &.active{
            outline: 1px solid #32dfe2;
          }
        }
      }
    }
</style>