0

I am trying to use a Bootstrap Carousel in my Angular app. I am replicating the first example here.

The carousel is appearing as expected with no console errors, but the first image remains, it never changes.

Here is my HTML:

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(35).jpg">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(33).jpg">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(31).jpg">
    </div>
  </div>
</div>

I have the following in my angular.json:

"styles": [
              "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
              "node_modules/angular-bootstrap-md/assets/scss/bootstrap/bootstrap.scss",
              "node_modules/angular-bootstrap-md/assets/scss/mdb.scss",
              "./node_modules/quill/dist/quill.core.css",
              "./node_modules/quill/dist/quill.snow.css",
              "node_modules/animate.css/animate.css",
              "src/styles.css"
            ],
           "scripts": [
              "node_modules/chart.js/dist/Chart.js",
              "node_modules/hammerjs/hammer.min.js",
              "./node_modules/quill/dist/quill.js"
            ]

Can someone please tell me what I'm missing?

user9847788
  • 2,135
  • 5
  • 31
  • 79

1 Answers1

1

Just use carousel component tags, not only a div and image.

Try this code: 

<mdb-carousel [animation]="'slide'">
  <mdb-carousel-item>
    <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(35).jpg" alt="First slide">
  </mdb-carousel-item>
  <mdb-carousel-item>
    <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(33).jpg" alt="Second slide">
  </mdb-carousel-item>
  <mdb-carousel-item>
    <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(31).jpg" alt="Third slide">
  </mdb-carousel-item>
</mdb-carousel>
Kordrad
  • 1,154
  • 7
  • 18