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

szar 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? Best

Damian Gemza staff commented 6 years ago

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

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


Please insert min. 20 characters.

FREE 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