Adding Images and Text in Element Ui Carousel in Vue js

Question

Please I'm still new using VueJs and am working on a new project and I'm having issues adding images and text in Element UI Carousel for Vue, please how do I add images and text in the 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>

Here is the link to CodeSandbox https://codesandbox.io/s/staging-sky-o82gq?file=/src/App.vue

Here is the link codesandbox.io/s/smoosh-haze-nf96j?file=/src/components/… — clemon ezeh

Bjørn Nyborg Bjørn Nyborg · Accepted Answer · 2020-11-27T13:18:59

You put content in the slides, by repeating the <el-carousel-item> and putting text/images inside it.

You can simply put content in like this:

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

I have created an example where i add different images and some text to the carousel: https://codesandbox.io/s/charming-hill-osoxh?file=/src/components/Carousel.vue

Does this answer your question?

Adding Images and Text in Element Ui Carousel in Vue js

1 Answers