【问题标题】:Adding Images and Text in Element Ui Carousel in Vue js在 Vue js 的 Element Ui Carousel 中添加图像和文本
【发布时间】:2021-03-09 22:58:24
【问题描述】:

请问我还是个使用 VueJs 的新手,并且正在开发一个新项目,我在为 Vue 的 Element UI Carousel 添加图像和文本时遇到问题,请问如何在 Carousel 中添加图像和文本?

  <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>

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

【问题讨论】:

标签: vue.js vuejs2 vue-component element-ui


【解决方案1】:

您通过重复&lt;el-carousel-item&gt; 并将文本/图像放入其中,将内容放入幻灯片中。

您可以像这样简单地放入内容:

<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

这能回答你的问题吗?

【讨论】:

  • 我的代码和你的类似,但我在 el-carousel-item 的卡片中也有一些按钮。你知道我们如何调整el-carousel-item 的宽度吗?因为它的宽度对于我放置在轮播项目中的卡片来说似乎太大了。
猜你喜欢
  • 2022-06-25
  • 1970-01-01
  • 2020-02-16
  • 1970-01-01
  • 2020-05-18
  • 2019-02-07
  • 2015-06-25
  • 2018-03-11
  • 1970-01-01
相关资源
最近更新 更多