mdb-carousel problems


Topic: mdb-carousel problems

pmrozek asked 3 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 3 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 commented 3 years ago

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

Best Regards, Piotr


Bartosz Termena staff answered 3 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.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Free
  • 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