需求:点击下方图片添加边框并改变走马灯播放的图片使其内容一致
方法:
element官方提供了setActiveItem方法

  <el-carousel trigger="click" height="380px" indicator-position="none" arrow="always" :initial-index="0"    
    ref="remarkCarusel" @change="lisChange">
          <el-carousel-item v-for="(item, index) in carLis" :key="index">
            <el-image style="width: 100%; height: 100%" :src="item.url"></el-image>
            <div class="carShow">
              <span>2020-04-08 18:08:16</span>
            </div>
          </el-carousel-item>
   </el-carousel>
       <ul>
          <li v-for="(item, index) in carLis" :key="index" @click="lisChange(index)" :class="{ lisColor: isActive == index }">
            <img :src="item.url" alt="" />
            <div class="showCot">
              <span>2020-04-08 18:08:16</span>
            </div>
          </li>
          <div class="clear"></div>
        </ul>
         lisChange (index) {
		     this.$refs.remarkCarusel.setActiveItem(index);
		     this.isActive = index;
		  }

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐