el-carousel无缝滚动

### 配置 Element UI `el-carousel` 组件实现无缝自动滚动

为了使 `el-carousel` 组件能够实现无缝自动滚动，可以调整组件属性并编写一些辅助逻辑。

#### 设置基础属性
通过设置 `interval` 属性控制轮播间隔时间。默认情况下，该值为 3000 毫秒 (即三秒钟)，可以根据需求修改此参数以加快或减慢切换速度[^1]。

<el-carousel :interval="2000">
</el-carousel>

#### 启用循环模式
启用 `loop` 属性可以让幻灯片在最后一张之后继续回到第一张，从而形成无限循环的效果[^4]。

<el-carousel :interval="2000" loop>
</el-carousel>

#### 自定义高度处理
当页面尺寸发生变化时动态调整轮播图的高度，确保其始终占据合适的屏幕空间。这可以通过监听窗口大小改变事件并在回调函数里更新 banner 的高度来完成。

mounted() {
  window.addEventListener('resize', this.handleResize);
},
methods: {
  handleResize() {
    const windowHeight = window.innerHeight;
    let newBannerHeight = windowHeight * 0.7; // 假设占整个视窗的70%
    
    if(newBannerHeight < 600){
      newBannerHeight = 600;
    }
      
    this.bannerHeight = newBannerHeight;
  },
}

#### 完整示例代码
下面是一个完整的 Vue.js 单文件组件例子，展示了如何配置 `el-carousel` 来达到上述目的：

<template>
<div class="swiper">
  <el-carousel indicator-position="none" arrow="always" :height="bannerHeight + 'px'" :interval="2000" loop>
    <el-carousel-item v-for="(item, index) in swiperlist" :key="index">
      <a :href="item.bannerTargetUrl" :target="targetUrl(item.targetType)">
        <img :src="item.bannerUrl" ref="image" @load="imageLoaded"/>
      </a>
    </el-carousel-item>
  </el-carousel>
</div>
</template>

<script>
export default {
  data(){
    return{
      swiperlist:[
        {bannerUrl:'url1.jpg',bannerTargetUrl:'#link1'},
        {bannerUrl:'url2.jpg',bannerTargetUrl:'#link2'}
      ],
      bannerHeight:window.innerHeight*0.7,
    };
  },
  mounted(){
    window.addEventListener('resize',this.handleResize);
  },
  methods:{
    targetUrl(type){
      switch(type){
        case "blank":
          return "_blank";
        default:
          return "_self";
      }
    },
    imageLoaded(event){
      console.log(`Image loaded`, event.target.src);
    },
    handleResize(){
      const windowHeight = window.innerHeight;
      let newBannerHeight = windowHeight * 0.7;

      if(newBannerHeight < 600){
        newBannerHeight = 600;
      }

      this.bannerHeight = newBannerHeight;
    }
  }
};
</script>