Loading Management for Carousel With MDB5 React


Topic: Loading Management for Carousel With MDB5 React

Miller42 asked 3 years ago

I can't work out how to use the React Bootstrap 5 Loading Management, according to these docs here: https://mdbootstrap.com/docs/b5/react/methods/loading-management/#docsTabsOverview

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>
            <MDBCarouselInner>
              <MDBCarouselItem className="active">
                <MDBCarouselElement
                  src="/Photos/049A0527.jpg"
                  alt="Church Night Landscape"
                  // className="mw-100"
                  // max-width="100%"
                  // height="100%"
                  // object-fit="contain"
                />
                <MDBCarouselCaption>
                  <h5>First slide label</h5>
                  <p>Canon RF 24-105mm f/4L.</p>
                  <p>f4.0, Shutter Speed: 1/100, ISO: 100</p>
                </MDBCarouselCaption>
              </MDBCarouselItem>

              <MDBCarouselItem>
                <MDBCarouselElement
                  src="/Photos/049A0547.jpg"
                  alt="Dog Portrait"
                />
                <MDBCarouselCaption>
                  <h5>Second slide label</h5>
                  <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                  </p>
                </MDBCarouselCaption>
              </MDBCarouselItem>

              <MDBCarouselItem>
                <MDBCarouselElement
                  src="/Photos/049A0589.jpg"
                  alt="Lake Landscape"
                />
                <MDBCarouselCaption>
                  <h5>Third slide label</h5>
                  <p>
                    Praesent commodo cursus magna, vel scelerisque nisl
                    consectetur.
                  </p>
                  s
                </MDBCarouselCaption>
              </MDBCarouselItem>
            </MDBCarouselInner>
          </MDBCarousel>
        </MDBContainer>
       </MDBLoadingManagement>
    </div>
  );
}

export default Home;

Miller42 answered 3 years ago

Anyone, please help?


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.


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