Topic: carousel disappearing after showing all pictures

MaximeGheraille free asked 4 years ago


Expected behavior

the carousel should not disappearing and keep restarting from the first picture

Actual behavior

after it has shown all pics it disappears

Resources (screenshots, code snippets etc.)

import React, { useState, useEffect } from "react";
import { MDBCarousel, MDBCarouselInner, MDBCarouselItem, MDBView, MDBContainer } from "mdbreact";
function Carousel() {
  const [items, setItems] = useState([]);
  let count ;
  useEffect(() => {
    async function fetchCaroussel() {
      const request = await fetch('url');
      const response = await request.json();
      setItems(response);
      count = response.length;
}
    fetchCaroussel();
  }, [0]);

  return (
    <MDBContainer id="containerCarousel">
      <MDBCarousel
        activeItem={1}
        length={count }
        showControls={true}
        showIndicators={false}
        className="z-depth-1"
        slide
      ><MDBCarouselInner>
          {items.map((item,index) => (
            <>
              <MDBCarouselItem itemId={index}>
                <MDBView>
                  <img
                    className="d-block w-100"
                    src={'https://emotion.dgnet.be' + item.URL + '.jpg'}
                    alt="slide picture"
                  />
                </MDBView>
              </MDBCarouselItem>
            </>
          ))}
        </MDBCarouselInner>
      </MDBCarousel>
    </MDBContainer>
  );
}

export default Carousel;

Piotr Glejzer staff answered 4 years ago


I already resolve this. If you have access to our GitLab account you have to change 1 thing in the Carousel.js.

  componentDidUpdate(prevProps, prevState) {
    const { length } = this.props;
    const initialLength = length;

    if (prevState.initialLength !== length) {
      this.setState({ initialLength });
    }
  }

This will be available in the next version and also you have to add dependency in your useEffect hook:

  useEffect(() => {
    const fetchCarousel = async () => {
      const request = await fetch('https://emotion.dgnet.be/API/caroussel.php');
      const response = await request.json();
      setItems(response);
      setMax(items.length);
    };

    fetchCarousel();
  }, [items.length]);

MaximeGheraille free answered 4 years ago


After further testing, I found out that the problem is related to setting the length of the carousel with props or variable.

The whole things works until I change length:11 to length: items.length or length:max, i guess the problem is related to mdbootstrap.

import React, { useState, useEffect } from "react";
import { MDBCarousel, MDBCarouselInner, MDBCarouselItem, MDBView, MDBContainer } from "mdbreact";
function Carousel() {
  const [items, setItems] = useState([]);
  const [max, setMax] = useState();

  useEffect(() => {
    async function fetchCaroussel() {
      const request = await fetch('https://emotion.dgnet.be/API/caroussel.php');
      const response = await request.json();
      setItems(response);
      setMax(items.length);
    }
    fetchCaroussel();
  }, []); 
  return (
    <MDBContainer id="containerCarousel">
      <MDBCarousel
        activeItem={1}
        length={max}
        showControls={true}
        showIndicators={false}
        className="z-depth-1"
        slide
      >            
    <MDBCarouselInner >
          {items.map((item,index) => (
            <>
              <MDBCarouselItem itemId={item.ID}>
                <MDBView>
                  <img
                    className="d-block w-100"
                    src={'https://emotion.dgnet.be' + item.URL + '.jpg'}
                    alt="slide picture"
                  />
                </MDBView>
              </MDBCarouselItem>
            </>
          ))}            
        </MDBCarouselInner>
      </MDBCarousel>
    </MDBContainer>
  );
}

export default Carousel;

Piotr Glejzer staff commented 4 years ago

thanks for the report. Yes, there is a bug about that. We will try to fix this soon. Have a nice day.



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: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.25.6
  • Device: PC
  • Browser: chrome
  • OS: windows
  • Provided sample code: No
  • Provided link: No