Carousel not sliding by default


Topic: Carousel not sliding by default

Lerner asked 5 years ago

Hi, I am using the carousel in Angular 7, but it doesn´t automatic slide on initialization. Just when I mouseover and mouseout the carousel. Please help me.

      <mdb-carousel [interval]="'3000'" [animation]="'slide'" [noPause]="true">
        <mdb-carousel-item>
          <img class="d-block w-100" src="../assets/img/banner_1.png" alt="Primeiro slide">
        </mdb-carousel-item>
        <mdb-carousel-item>
          <img class="d-block w-100" src="../assets/img/banner_3.png" alt="Segundo slide">
        </mdb-carousel-item>
        <mdb-carousel-item>
          <img class="d-block w-100" src="../assets/img/banner_1.png" alt="Terceiro slide">
        </mdb-carousel-item>
      </mdb-carousel>

Damian Gemza staff answered 5 years ago

Dear @Lerner

Thanks for your report - this is a bug. We'll resolve this problem, and we'll let you know about this.

For now, please use this workaround:

.html:

<mdb-carousel #carousel class="carousel slide" [interval]="'3000'" [animation]="'slide'" [noPause]="true">
                <mdb-carousel-item>
                    <div class="view w-100">
                        <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" alt="First slide">
                        <div class="mask rgba-black-light waves-light" mdbWavesEffect></div>
                    </div>
                    <div class="carousel-caption">
                        <h3 class="h3-responsive">Light mask</h3>
                        <p>First text</p>
                    </div>
                </mdb-carousel-item>
                <mdb-carousel-item>
                    <div class="view w-100">
                        <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg" alt="Second slide">
                        <div class="mask rgba-black-strong waves-light" mdbWavesEffect></div>
                    </div>
                    <div class="carousel-caption">
                        <h3 class="h3-responsive">Strong mask</h3>
                        <p>Secondary text</p>
                    </div>
                </mdb-carousel-item>
                <mdb-carousel-item>
                    <div class="view w-100">
                        <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(9).jpg" alt="Third slide">
                        <div class="mask rgba-black-slight waves-light" mdbWavesEffect></div>
                    </div>
                    <div class="carousel-caption">
                        <h3 class="h3-responsive">Slight mask</h3>
                        <p>Third text</p>
                    </div>
                </mdb-carousel-item>
            </mdb-carousel>

.ts:

@ViewChild('carousel', {static: true}) carousel: any;

  ngAfterViewInit() {
    this.carousel.el.nativeElement.dispatchEvent(new Event('mouseleave'));
  }

Best Regards,

Damian


Lerner commented 5 years ago

Thank you! It worked for me!


Damian Gemza staff answered 5 years ago

Dear @Lerner

This problem will be resolved with the next version of MDB Angular.

Best Regards,

Damian


Lerner commented 5 years ago

Thank you very much! When will you launch the next version?


Damian Gemza staff commented 5 years ago

The next version will be launched on the 22nd of July.


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.5.4
  • Device: Web
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No