Topic: Loading Management for Carousel With MDB5 React

Miller42 free asked 2 years ago

I can't work out how to use the React Bootstrap 5 Loading Management, according to these docs here:

I'm a bit new to React and using Hooks and such, how do I use the useRef and data-mdb-parent-selector? I want it so it has a loading indicator until the whole Carousel has been loaded. Can someone please help, it would be nice if there was an example in the docs. Thanks :)

function Carousel() {
  const basicRef = useRef(null);
  return (
    <div className="data-mdb-parent-selector" ref={basicRef} style={{ height: "300px", width: "100%" }}>
      <MDBLoadingManagement parentRef={basicRef}>
        <MDBContainer style={{ padding: "15px", height: "85vh" }}>
          <MDBCarousel showIndicators showControls fade>
              <MDBCarouselItem className="active">
                  alt="Church Night Landscape"
                  // className="mw-100"
                  // max-width="100%"
                  // height="100%"
                  // object-fit="contain"
                  <h5>First slide label</h5>
                  <p>Canon RF 24-105mm f/4L.</p>
                  <p>f4.0, Shutter Speed: 1/100, ISO: 100</p>

                  alt="Dog Portrait"
                  <h5>Second slide label</h5>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

                  alt="Lake Landscape"
                  <h5>Third slide label</h5>
                    Praesent commodo cursus magna, vel scelerisque nisl

export default Home;

Sorry for the delay, I was replying on Friday but my message didn't post.

For the Loading Management please use the code which is presented below the example demo. The description is a bit deprecated and things such as data-mdb-parent-selector are not necessary. We will correct it soon.

About the carousel - loading management and carousel are not compatible, so you need to create a custom mechanism, to manage it as you described.

Miller42 free answered 2 years ago

Anyone, please help?

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: MDB5 2.2.0
  • Device: Lenovo Legion 7i
  • Browser: Brave
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes