Carousel not rendering

[6ichem]

My carousel isn't rendering:

Here's the code I've used for it:

<AliceCarousel disableDotsControls disableButtonsControls ref={(el) => (Carousel = el)} autoHeight={true} autoWidth={true} responsive={responsive} animationType='slide'>
        {items.map((i, index) => (
          <img src={i} key={index} alt='' srcSet='' className={Styles.slider} />
        ))}
</AliceCarousel>

<button className={Styles.next} style={{ outline: "none" }} onClick={() => Carousel.slideNext()}>SlideButton</Button>

I can't tell what's causing this or so, it seems to be an issue with rendering cause when I have another component on my page and switch to the carousel component it shows it like this but when I reload the page it actually renders it properly. The issue happens all the time when deployed as well for some reason. Is this a React issue or something to do with the component itself?

[maxmarinich]

Hi, @6ichem! Before provide full example of your code, please see correct examples here.

[6ichem]

Hi, @6ichem! Before provide full example of your code, please see correct examples here.

Here's the full carousel component:

import { useEffect, useContext } from "react";
import { AppContext } from "../../context/Context";

import AliceCarousel from "react-alice-carousel";
import "react-alice-carousel/lib/alice-carousel.css";

import Styles from "../../styles/Product.module.scss";

const Carousel = () => {
  const { carousel, setCarousel } = useContext(AppContext);

  useEffect(() => {
    setCarousel(true);
    return () => {
      setCarousel(false);
    };
  });

  let Carousel;

  const items = ["image1.svg", "image2.svg", "image1.svg", "image2.svg"];

  const responsive = {
    0: { items: 1 },
    1024: { items: 2 },
  };
  return (
    <div
      className={`container flex`}
      style={{
        marginTop: "40px",
      }}>
      <AliceCarousel
        disableDotsControls
        disableButtonsControls
        ref={(el) => (Carousel = el)}
        autoHeight={true}
        autoWidth={true}
        responsive={responsive}
        animationType='slide'>
        {items.map((i, index) => (
          <img src={i} key={index} alt='' srcSet='' className={Styles.slider} />
        ))}
      </AliceCarousel>
      <button
        className={Styles.next}
        style={{ outline: "none" }}
        onClick={() => Carousel.slideNext()}>
        <svg
          width='142'
          height='215'
          viewBox='0 0 142 216'
          fill='none'
          xmlns='http://www.w3.org/2000/svg'>
          <path
            d='M0.0605469 0.413574H136C139.314 0.413574 142 3.09987 142 6.41357V209.998C142 213.312 139.314 215.998 136 215.998H0.0605469V0.413574Z'
            fill='url(#paint0_linear)'
          />
          <path
            d='M106.966 101.227L113.945 108.206L106.966 115.185'
            stroke='white'
            strokeWidth='2'
          />
          <defs>
            <linearGradient
              id='paint0_linear'
              x1='135.516'
              y1='108.206'
              x2='4.18428'
              y2='108.206'
              gradientUnits='userSpaceOnUse'>
              <stop stopColor='#282732' />
              <stop offset='0.387025' stopColor='#282732' stopOpacity='0.88' />
              <stop offset='1' stopColor='#282732' stopOpacity='0' />
            </linearGradient>
          </defs>
        </svg>
      </button>
    </div>
  );
};

export default Carousel;

And I'm calling it here like this:

import { useContext } from "react";

import { AppContext } from "../context/Context";

import Carousel from "./components/Carousel";
import Styles from "../styles/Product.module.scss";
import Timer from "./components/Timer";
import GreenButton from "./components/buttons/GreenButton";
import Instructions from "./components/InstructionsNavigation";
import Card from "./components/Card";
import StayConnected from "./components/StayConnected";
import RedeemCode from "./components/RedeemCode";

import BuyModal from "./components/modals/RedeemModal";

const ProductPage = () => {
  const { carousel, modalIsOpen, openModal, closeModal } = useContext(
    AppContext
  );
  return (
    <div className={carousel ? Styles.layout : ""}>
      <div>
        <RedeemCode />
      </div>
      <div className='flex justify-center' style={{ marginTop: "40px" }}>
        <div style={{ marginRight: "30px" }}>
          <img src='image5.svg' alt='' srcSet='' />
        </div>
        <div className={Styles.infos}>
          <h1>Voucher for Burger King</h1>
          <h6>FOOD AND DRINKS</h6>
          <span>
            28 000
            <img
              src='currency.svg'
              className='inline ml-2 mb-2'
              height='24.36px'
              width='21.22px'
              alt=''
            />
          </span>
          <Timer />
          <div style={{ marginTop: "24px" }}>
            <GreenButton width={"300px"} height={"60px"} onClick={openModal}>
              Redeem product
            </GreenButton>
          </div>
        </div>
      </div>
      <div>
        <Instructions />
        <div className={`${Styles.sameSale}`} style={{ marginTop: "69px" }}>
          <h1>Same sale</h1>
          <div className='grid grid-cols-3 gap-6' style={{ marginTop: "28px" }}>
            <Card />
            <Card />
            <Card />
          </div>
        </div>

        <BuyModal modalIsOpen={modalIsOpen} closeModal={closeModal} />

        <StayConnected />
      </div>
    </div>
  );
};

export default ProductPage;

[maxmarinich]

Eventually, it's not a gallery issue. Checked with working code.

[zhuangya]

I encountered this recently as well, if the autoWidth is set to true, there could be a racing condition between ref the stageComponent and initialize state

if the browser happens to initialize state before ref the stageComponent, the coords will only be a array with {width:0}.

and this leads to a list of <li style="width 0px">...</li>

---