Carousel not sliding by default

Topic: Carousel not sliding by default

Lerner free asked 4 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>

Add comment

Damian Gemza staff answered 4 years ago

2 0 Best answer

<p>Dear <a href="/profile/?id=68413" target="_blank" rel="nofollow">@Lerner</a></p>

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

<p>For now, please use this workaround:</p>

<pre class="prettyprint"><code><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>
</code></pre>

<pre class="prettyprint"><code>@ViewChild('carousel', {static: true}) carousel: any;

ngAfterViewInit() {
    this.carousel.el.nativeElement.dispatchEvent(new Event('mouseleave'));
  }
</code></pre>

<p>Best Regards,</p>

<p>Damian</p>

Please insert min. 20 characters.

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 free commented 4 years ago

Thank you! It worked for me!

Add comment

Damian Gemza staff answered 4 years ago

2 0 Best answer

Dear @Lerner

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

Best Regards,

Damian

Lerner free commented 4 years ago

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

Damian Gemza staff commented 4 years ago

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: 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

Lerner

7Support score
1Questions 0Answers 0Snippets