Carousel not auto sliding

[mitchn5]

Upon grabbing the code example from https://daemonite.github.io/material/docs/4.0/components/carousel/ the auto sliding that was shown no longer shows up in my app. My code is below. Our framework is Angular/material-io.

<div class="row">
  <div *ngIf="promoUrl !== null" id="carousel" class="carousel slide container" data-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img [src]="promoUrl" (error)="promoUrl = defaultPromo" [ngClass]="[isWeb || isIpad ? 'promoWeb' : '']" class="promo" alt="">
      </div>
      <div class="carousel-item" *ngFor="let promo of promos;">
        <img [src]="promo" (error)="onImgError($event)" [ngClass]="[isWeb || isIpad ? 'promoWeb' : '']" class="promo" alt="">
      </div>
    </div>
    <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
  <div *ngIf="promoUrl === null" [ngClass]="[isWeb ? 'center' : '']" class="container">
    <img [src]="defaultPromo" class="promo" alt=""/>
  </div>
</div>

[mitchn5]

I have added data-ride="carousel" or data-wrap="false" and those aren't reflected. The only one that seems to work in html is data-interval.

[djibe]

Hi, well it works in my fork (https://djibe.github.io/material/docs/4.6/components/carousel/)

[mitchn5]

Hi @djibe, I've tried your carousel example with no luck as well. Is it possible I'm missing something outside of just the html? It's strange that certain options work while others don't.

[djibe]

Apart from bootstrap.bundle.min.js, you just need data-attributes or control with JS. Does your console show an error loading scripts ?

[mitchn5]

Yea I've included a script tag for bootstrap in index.html, the carousel will only cycle after user clicks next/prev then clicks away from carousel.

[mitchn5]

Hi guys, I added this to my component.ts page for this html and it fixed my issue.

$(document).ready(function() { // @ts-ignore $('.carousel').carousel({ interval: 5000, ride: 'carousel', touch: true }); });