Carousel items not showing

Topic: Carousel items not showing

Hyd3r1 free asked 4 years ago

  <mdb-carousel :interval="8000" showControls showIndicators>
<mdb-carousel-item
  video
  src="https://mdbootstrap.com/img/video/Tropical.mp4"
  mask="black-light"
  alt="First slide"
  auto
  loop
>
  <mdb-carousel-caption animation="fadeInDown" title="Carousel Caption" text="First text"></mdb-carousel-caption>
</mdb-carousel-item>
<mdb-carousel-item
  video
  src="https://mdbootstrap.com/img/video/forest.mp4"
  mask="black-slight"
  alt="Second slide"
  auto
  loop
>
  <mdb-carousel-caption animation="fadeInDown" title="Carousel Caption" text="Second text"></mdb-carousel-caption>
</mdb-carousel-item>
<mdb-carousel-item
  video
  src="https://mdbootstrap.com/img/video/Agua-natural.mp4"
  mask="black-strong"
  alt="Third slide"
  auto
  loop
>
  <mdb-carousel-caption animation="fadeInDown" title="Carousel Caption" text="Third text"></mdb-carousel-caption>
</mdb-carousel-item>

Not working, i have imported components (i have Nuxt.JS)

And got error: [Vue warn]: Missing required prop: "items" And not have carousel in website enter image description here

(Jeżeli ktoś z supportu mówi po polsku to miło by było by się ze mną po polsku porozumiewał heh.)

Add comment

Magdalena Dembna staff answered 4 years ago

0 0 Best answer

Please insert min. 20 characters.

Since version 6.0.0 there is a new syntax for the Carousel component - and items are a required property. You can learn about new syntax here: https://mdbootstrap.com/docs/vue/advanced/carousel/ - legacy docs are compatible only with MDB Vue 5.x. As for answering in different languages, the support forum allows user to browse for similar problems and use previous solutions - therefore we need to stick to English. Best regards, Magdalena

Hyd3r1 free commented 4 years ago

Okey, how to create example <div class="carousel slide carousel-fade"><br> <div class="carousel-inner"><br> <div class="carousel-item active" style="background-image: url('./static/background.jpg'); height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover;"><br> <div class="view"><br> <center class="mt-5"><img src="./static/logo.png" alt=""></center><br> <div class="mask rgba-black-light d-flex justify-content-center align-items-center"><br> <div class="text-center white-text"><br> </div><br> </div><br> </div><br> </div><br> </div><br></div> and add more sliders with this style carousel on mdbvue?

Please insert min. 15 characters.

Magdalena Dembna staff commented 4 years ago

For custom slides, I recommend using multi carousel syntax and create custom layouts within named slots. You can find examples here: https://mdbootstrap.com/docs/vue/advanced/carousel/#multi-item-carousel

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB Vue
MDB Version: 6.7.1
Device: PC
Browser: Chrome
OS: Linux (Ubuntu 20.04)
Provided sample code: No
Provided link: No

Hyd3r1

5Support score
1Questions 0Answers 0Snippets