Добавление изображений и текста в Element Ui Carousel в Vue js

Пожалуйста, я все еще новичок в использовании VueJs и работаю над новым проектом, и у меня возникают проблемы с добавлением изображений и текста в Element UI Carousel для Vue. Как мне добавить изображения и текст в карусель?

  <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
person clemon ezeh    schedule 27.11.2020    source источник
comment
Можете ли вы предоставить пример песочницы кода? ????   -  person Bjørn Nyborg    schedule 27.11.2020
comment
Вот ссылка codesandbox.io/s/smoosh -haze-nf96j? file = / src / components /   -  person clemon ezeh    schedule 27.11.2020

Ответы (1)


arrow_upward
2
arrow_downward

Вы помещаете контент в слайды, повторяя <el-carousel-item> и помещая в него текст / изображения.

Вы можете просто поместить контент следующим образом:

<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

Отвечает ли это на ваш вопрос?

person Bjørn Nyborg    schedule 27.11.2020
comment
Мой код похож на ваш, но у меня также есть кнопки на карточках внутри el-carousel-item. Вы знаете, как можно отрегулировать ширину el-carousel-item? Потому что его ширина кажется слишком большой для карты, которую я помещаю в элемент карусели. - person selubamih; 09.02.2021