mdb-carousel problems


Topic: mdb-carousel problems

pmrozek pro premium asked 2 years ago

I need to click on a page to see a carousel. I would like to know why it is not starting without click on the page.

After loaded the page. I need to click on the page to see the carousel. It is a problem with my configuration?

<mdb-carousel [isControls]="true" class="carousel slide" [animation]="'slide'">
    <mdb-carousel-item>
        <div class="view">
            <img class="d-block w-100" src="/assets/slider_2.jpg" alt="Choice">
            <div class="mask rgba-purple-slight waves-light" mdbWavesEffect></div>
        </div>
        <div class="carousel-caption">
            <div class="animated fadeInDown panel-transparent">
                <h3 class="h3-responsive">...</h3>
                <p> ...
                </p>
            </div>
        </div>
    </mdb-carousel-item>
    <mdb-carousel-item>
        <div class="view">
            <img class="d-block w-100" src="/assets/slider_3.jpg" alt="Together">
            <div class="mask rgba-black-strong waves-light" mdbWavesEffect></div>
        </div>
        <div class="carousel-caption">
            <div class="animated fadeInDown panel-transparent">
                <h3 class="h3-responsive">...</h3>
                <p>...
                </p>
            </div>
        </div>
    </mdb-carousel-item>
    <mdb-carousel-item>
        <div class="view">
            <img class="d-block w-100" src="/assets/slider_1.jpg" alt="Discover">
            <div class="mask rgba-indigo-light waves-light" mdbWavesEffect></div>
        </div>
        <div class="carousel-caption">
            <div class="animated fadeInDown panel-transparent">
                <h3 class="h3-responsive">...</h3>
                <p>...</p>
            </div>
        </div>
    </mdb-carousel-item>
</mdb-carousel>

https://kancelaria-prawna.uk


Bartosz Termena staff commented 2 years ago

Dear @pmrozek

I can't reproduce your problem, when i paste your carousel to my new project, everything seems to work fine.

Could you send me more of your code (demo app or entire app in zip file), to: b.termena@mdbootstrap.com

Best Regards, Bartosz.


pmrozek pro premium commented 2 years ago

Thank you for your reply. I sent you the entire app in zip file.

Best Regards, Piotr


Bartosz Termena staff answered 2 years ago

Dear @pmrozek

This bug is caused by ChangeDetectionStrategy.OnPush in your app.component.ts.


You can go ahead and see that after removing this line of code :

changeDetection: ChangeDetectionStrategy.OnPush

Your carousel will work as it should.


For now in our carousel there is no method this.cdRef.markForCheck(); after view init .

Of course we will fix that.

The problem should be resolved in the next version (this monday).

Best Regards, Bartosz.


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.2.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes