Carousel issue : activeSlide doesnt work properly

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

Add comment

Damian Gemza staff answered 6 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:
<div>
<pre>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);

}
}</pre>
</div>
.html:
<div>
<pre><mdb-carousel #carousel [isControls]="true" [animation]="'slide'" [interval]="'1000'">

<mdb-slide>

</mdb-slide>

<mdb-slide>

</mdb-slide>

<mdb-slide>

</mdb-slide>

</mdb-carousel>

</pre>
</div>
For me it's works fine, so you can use it.

Best Regards,

Damian

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

Please insert min. 20 characters.

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

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

szar

Pro User 0Support score
1Questions 0Answers 0Snippets