Topic: Carousel issue : activeSlide doesnt work properly
szar pro asked 6 years ago
Hi, Im working on mdbangular pro 6.1.3, I copied the exact example of carousel (the last example) to use the options and method but for any change of activeSlide index (
public activeSlideIndex: number = 3
) the result is the same and the carousel starts with the slide index 0. and second problem is by changing the slide nothing will write in console with
activeSlideChange(){
console.log(this.activeSlideIndex);
}
Thanks
Damian Gemza staff answered 6 years ago
Dear Szar,
You can get index of current active slide by using ViewChildren decorator. Please check my code:
.ts:
.html:
For me it's works fine, so you can use it.
Best Regards,
Damian
import { Component, AfterContentChecked, ViewChild } from '@angular/core'; @Component({ selector:'app-root', templateUrl:'./app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements AfterContentChecked { @ViewChild('carousel') carousel: any; ngAfterContentChecked() { console.log(this.carousel._currentActiveSlide); } }
<mdb-carousel #carousel [isControls]="true" [animation]="'slide'" [interval]="'1000'"> <!--First slide--> <mdb-slide> <img class="d-block w-100"src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg"alt="First slide"> </mdb-slide> <!--/First slide--> <!--Second slide--> <mdb-slide> <img class="d-block w-100"src="https://mdbootstrap.com/img/Photos/Slides/img%20(129).jpg"alt="Second slide"> </mdb-slide> <!--/Second slide--> <!--Third slide--> <mdb-slide> <img class="d-block w-100"src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg"alt="Third slide"> </mdb-slide> <!--/Third slide--> </mdb-carousel> <!--/.Carousel Wrapper-->
szar pro commented 6 years ago
Thanks all for kindly reply By changing [animation]="'fade'" to [animation]="'slide'" the carousel will work best regardsFREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Resolved
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: Yes
- Provided link: No
Tags
Damian Gemza staff commented 6 years ago
Dear szar, activeSlideChange() or activeSlideIndex aren't used to change the first visible slide. There's no possibility for now. Other case is this, that there's a bug with this event, and we have to check it, and fix it. Best Regards, Damianszar pro commented 6 years ago
Dear Damian Thanks for your replying. Is there any way to get the slide index when the carousel has been changed? BestDamian Gemza staff commented 6 years ago
Dear Szar, These problems will be fixed with next release of MDB Angular. Best Regards, Damian