Topic: Carousel - nextWhenVisible();
<div id="carouselReference" class="carousel-reference carousel slide carousel-fade position-relative obs" data-mdb-ride="carousel">
document.addEventListener('DOMContentLoaded', function() {
const carouselReference = document.querySelector('#carouselReference');
const carousel = new mdb.Carousel(carouselReference);
carousel.nextWhenVisible();
});
I have a carousel that is at the bottom of my page. I want to cycle the carousel to next only when i am in viewport of that section. At the moment, i dont get any errors, but also, it's not working.
This method does not cause the carousel to change slides when in the viewport. This method will change the slide if the carousel is visible - that is, it does not have display: none set. Check out this snippet: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/5997357#js-tab-view
The carousel is initially set to display none. You can check in the console that the slide and slid events are not triggered after loading the snippet. But when you scroll down, the carousel display will be updated, and then calling the nextWhenVisible method again will change the slide.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 6.1.0
- Device: PC
- Browser: Google Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No