vue+element-ui幻灯片

您可以使用 Element-UI 的 Carousel 组件来实现幻灯片效果。首先，您需要在项目中引入 Element-UI，并在需要使用的页面中注册 Carousel 组件。然后，您可以在 Carousel 组件中使用 Element-UI 的 Card 组件来展示每个幻灯片的内容。以下是一个简单的示例代码：

<template>
  <el-carousel :interval="4000">
    <el-carousel-item v-for="(item, index) in slideList" :key="index">
      <el-card :body-style="{ padding: '0px' }">
        <img :src="item.imgUrl" style="width: 100%">
      </el-card>
    </el-carousel-item>
 </el-carousel>
</template>

<script>
export default {
  data() {
    return {
      slideList: [
        { imgUrl: 'https://picsum.photos/800/300?random=1' },
        { imgUrl: 'https://picsum.photos/800/300?random=2' },
        { imgUrl: 'https://picsum.photos/800/300?random=3' },
        { imgUrl: 'https://picsum.photos/800/300?random=4' }
      ]
    };
  }
};
</script>

在上面的代码中，我们使用了一个数组 slideList 来存储每个幻灯片的图片地址。然后，在 Carousel 组件中使用 v-for 循环遍历 slideList 数组，生成每个幻灯片的内容。在每个幻灯片中，我们使用了 Element-UI 的 Card 组件来展示图片。