Carousel issue : activeSlide doesnt work properly

Topic: Carousel issue : activeSlide doesnt work properly

szar pro asked 7 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 commented 7 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, Damian

szar pro commented 7 years ago

Dear Damian Thanks for your replying. Is there any way to get the slide index when the carousel has been changed? Best

Damian Gemza staff commented 7 years ago

Dear Szar, These problems will be fixed with next release of MDB Angular. Best Regards, Damian

Add comment

Damian Gemza staff answered 7 years ago

0 0 Best answer

Dear Szar, You can get index of current active slide by using ViewChildren decorator. Please check my code: .ts:

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);

}
}

.html:

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

For me it's works fine, so you can use it. Best Regards, Damian

szar pro commented 6 years ago

Thanks all for kindly reply By changing [animation]="'fade'" to [animation]="'slide'" the carousel will work best regards

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

User: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

About author

szar

Pro User

0Support score
1Questions 0Answers

0Snippets likes 0Snippets