0

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

Improve this question
2

1 Answer 1

Reset to default
2

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?

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

My code is similar to yours but I have also some buttons in cards inside el-carousel-item. Do you know how can we adjust width of el-carousel-item? Because it's width seems too much for the card that I am placing in carousel item.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.