在元素 Ui 中添加图像和文本在 Vue js 中轮播

Question

拜托，我还是 VueJs 的新手，正在开发一个新项目，我在 Element 中添加图像和文本时遇到问题 UI Carousel for Vue，请问我如何在 Element 中添加图像和文本旋转木马？

  <el-carousel :interval="4000" type="card" height="400px">
    <el-carousel-item v-for="item in 6" :key="item">
      <h3 class="medium">{{ item }}</h3>
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
  data(){
    return{
      
    }
  }
}
</script>

这里是 link 到 CodeSandbox https://codesandbox.io/s/staging-sky-o82gq?file=/src/App.vue

Answer 1

您将内容放入幻灯片，方法是重复 <el-carousel-item> 并将 text/images 放入其中。

你可以像这样简单地输入内容：

<el-carousel :interval="4000" type="card" height="300px">
    <el-carousel-item>
      <div class="item">
        <div class="item__content">
          Text for slide 1
        </div>
        <img class="item__image" src="https://picsum.photos/300?random=1" alt="" />
      </div>
    </el-carousel-item>
    <el-carousel-item>
      <div class="item">
        <div class="item__content">
          Another text for slide 2
        </div>
        <img class="item__image" src="https://picsum.photos/300?random=2" alt="" />
      </div>
    </el-carousel-item>
    <el-carousel-item>
      <div class="item">
        <div class="item__content">
          Yet another for third image
        </div>
        <img class="item__image" src="https://picsum.photos/300?random=3" alt="" />
      </div>
    </el-carousel-item>
  </el-carousel>

我创建了一个示例，其中我向轮播添加了不同的图像和一些文本： https://codesandbox.io/s/charming-hill-osoxh?file=/src/components/Carousel.vue

这是否回答了您的问题？

在元素 Ui 中添加图像和文本在 Vue js 中轮播

Adding Images and Text in Element Ui Carousel in Vue js

vue.js

vue-component

vuejs2

element-ui