Topic: mdb-carousel problems
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>
Bartosz Termena staff answered 5 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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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
Bartosz Termena staff commented 5 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 5 years ago
Thank you for your reply. I sent you the entire app in zip file.
Best Regards, Piotr