Debug-028-el-carousel走马灯-当展示图片为2的问题处理

前言：

        el-carousel走马灯又是给elementui填坑的一天。el-carousel走马灯其实类似小程序中的轮播图。这里担心涉及版权问题就不贴项目中的图了。简单阐述一下问题：正常使用el-carousel时，如果图片数量大于等于3时，可以定时自动顺序播放；但是当图片只有两张时，自动播放时这个轮播图就不会再循环播放，而是左右来回切换，各位小伙伴可以下去试一下。

算了还是举一个小小的例子方便大家看一下：

两张图时：

el-carousel-两个

三张图时：

el-carousel-三个

       其他方面没有任何问题，直接参考官方文档即可。这里直接给出一个常规思路：图片内容是需要存放在数组中的，这里在原有的两张基础上再给出两张图一样的图片，也就是在原来[img1,img2]的基础上变成[img1,img2,img1,img2],这样就能循环轮播了。想到这一点还是比较妙的，但是轮播图内部下方会出现4个切换的按钮，这就相当于告诉别人我这里有四张图片。那么接下来就是要把后两张图片的切换按钮隐藏掉即可（这里要注意隐藏时机和样式的处理），这样视觉上就会认为是两张图在滚动，也解决了不能循环的问题。如下图画圈所示：

//这里是基于vue3+ts写的，如果代码看不懂，就先理解思路，然后直接在自己项目中先尝试。

//js部分
const isThree = ref(false)
const isFour = ref(false)

// 这里轮播图由于仅展示两张图，el-carousel在只有两张图的时候会左右切换，不会循环切换，故添加自定义样式
function changeCarousel(val:any) {
  console.log('val', val)
  if (val === 2) {
    isThree.value = true
    isFour.value = false
  } else if (val === 3) {
    isThree.value = false
    isFour.value = true
  } else {
    isThree.value = false
    isFour.value = false
  }
}


// html
      <div class="right-carousel" :class="[{ Box3: isThree }, { Box4: isFour }]">
         <el-carousel :interval="5000" @change="changeCarousel">
            <el-carousel-item v-for="item in introImgs" :key="item">
              <img :src="item">
            </el-carousel-item>
         </el-carousel>
      </div>


//css


       //先将复制出来的3，4两个轮播图的下标切换按钮隐藏，这一点是必须的
          :deep(.el-carousel__indicators) {
            & > li:nth-child(3),
            & > li:nth-child(4) {
              display: none;
            }
          }



     //切换到第三张图的时候，改变第一张图的下标切换按钮的颜色，让用户感觉是切换回了第一张图
        .Box3{
          :deep(.el-carousel__indicators) {
            & > li:nth-child(1)  {
              // background: #d4c1c1 !important;

              button{
                opacity: .8 !important; //透明度
              }

            }
          }
        }


//切换到第四张图的时候，改变第二张图的下标切换按钮的颜色，让用户感觉是切换回了第二张图
        .Box4{
          :deep(.el-carousel__indicators) {
            & > li:nth-child(2) {
              button{
                opacity: .8 !important; //透明度
              }

            }
          }
        }

这里也给大家推荐一篇类似的文章，他也是用的这种方法，但是没有处理下方切换按钮的颜色，仔细看还是能看出来的。我在他的基础上调整了切换按钮的透明度，算是一个优化吧：

解决 element ui Carousel跑马灯组件，el-carousel-item数量为2时，组件循环方向一左一右的问题_el-carousel-item数量为2时,组件循环方向一左一右的问题-CSDN博客文章浏览阅读2.5k次，点赞2次，收藏2次。在项目中有些数据需要轮播展示时，使用Carousel组件非常合适，可以在页面内挂载很多内容节点，平常组件的循环显示方向默认是往右边滑动，但是在循环数量为2时，循环显示方向就会呈现一左一右，对于部分强迫症客户来说体验感就不是很好，如下图。首先获取要循环的数据的长度length，如果为2时，复制一次，使其成为长度length为4的数组，然后将Carousel组件的indicators(下标显示器)多复制的给隐藏（原本长度为2，现在为4，就隐藏第3个和第4个)完整代码如下，可直接复制使用。_el-carousel-item数量为2时,组件循环方向一左一右的问题https://blog.csdn.net/Working_hard_111/article/details/131833892 备注：当然肯定还有别的思路，这里时间有限不再尝试。比如暴力一点，把下方切换按钮全部隐藏掉，反正也只有来个两张图，要不要切换都无所谓：

再比如考虑一下，为什么当图片是两张的时候组件不再循环播放。可以调研一下

小结：

        当数量大于等于三时都是没有问题的正常循环播放，只有在两张的时候会出现这种情况。如果要求不高的话也无所谓，但是这个轮播图我们业务里是使用在大屏展示中的，左右播放确实效果不佳。如果把它当一个问题的话，也比较适合前端练练css，毕竟身为前端还是需要一些强迫症的，而且这也是前端区别于后端的很重要的一块内容。