Topic: Carousel - nextWhenVisible();

studio77 priority asked 7 months ago


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


Grzegorz Bujański staff answered 6 months ago


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.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • 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