Slider content donot show up on production

[aashishshrestha5532]

In local development the Slider is working fine but in production the slider is not showing up

I am using react-slick@0.26.1

Production

Local Development

Code

 import React from "react";
import "./ProductList.css";
import Product from "./Product";
import Slider from "react-slick";
import {
  ChevronLeft as PrevArrowIcon,
  ChevronRight as NextArrowIcon,
} from "@material-ui/icons";

function NextArrow(props) {
  const {onClick } = props;
  return (
      <NextArrowIcon  onClick={onClick} className="productList__nextArrow"/>
  );
}

function PrevArrow(props) {
  const {onClick } = props
  return (
    <PrevArrowIcon onClick={onClick} className="productList__prevArrow"/>
  );
}

const HorizontalSeparator = () => (
  <div
    style={{
      height: 240,
      width: 1,
      backgroundColor: "lightgray",
      opacity: 0.85,
    }}
  />
);

// configuration for carousel
let settings = {
  dots: false,
  infinite: true,
  speed: 500,
  slidesToShow: 5,
  initialSlide: 0,
  nextArrow: <NextArrow />,
  prevArrow: <PrevArrow />,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 5,
        slidesToScroll: 5,
        infinite: true,
        dots: true,
      },
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        initialSlide: 3,
      },
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
      },
    },
  ],
};

const ProductList = ({ title, data ,styles}) => {
  return (
      <div className='productList' style={styles}>
        <h2 className="productList__title"> {title}</h2>
        <Slider {...settings} className="productList__row">
          {data?.map((item, index) => (
            <div key={index} className="productList__item">
              <Product
                name={item.name}
                image={item.image}
                price={item.price}
                slug={item.slug}
                rating={item.rating}
              />
              {/* HorizontalSeparator should not follow after last item */}
              {index +1 !== data.length && <HorizontalSeparator />}
            </div>
          ))}
        </Slider>
    </div>
  );
};

export default ProductList;

[akiran]

@aashishshrestha5532 It is most probably an issue with your build system

[aashishshrestha5532]

@aashishshrestha5532 It is most probably an issue with your build system

I have observed following after my build <div data-index="-5" tabindex="-1" class="slick-slide slick-cloned" aria-hidden="true" style="width: 0px;">

How width is inlined to 0 in this case? @akiran Due to which the items are not displaying.After I changed the width to some none zero value from the browser the items just show up

[akiran]

@aashishshrestha5532 Maybe data is available after Slider rendering

Can you try this

const ProductList = ({ title, data ,styles}) => {
if (!data) {
   return null
}
return (
   <div className='productList' style={styles}>
     <h2 className="productList__title"> {title}</h2>
     <Slider {...settings} className="productList__row">
       {data.map((item, index) => (
         <div key={index} className="productList__item">
           <Product
             name={item.name}
             image={item.image}
             price={item.price}
             slug={item.slug}
             rating={item.rating}
           />
           {/* HorizontalSeparator should not follow after last item */}
           {index +1 !== data.length && <HorizontalSeparator />}
         </div>
       ))}
     </Slider>
 </div>

[stewartknapman]

@akiran I am seeing the same issue. The data is there and the markup is generated but it's not showing the items because the slides widths are being set to 0px. If I manually alter the slides width in the dev tools then the width is recalculated and they show up.

In our case we are pulling the data for the slide from a client side API on page load. So I suspect this is happening because the images haven't finished being loaded before the slide widths are being calculated.

Is there any way to force the slider to recalculate after the images have loaded?

I'm not seeing anything in the examples and there doesn't seem to be all the events/methods of the original slick slider has. Effectively it would be good to be able to do something like the original does $('.slider-class').slick('setPosition'); (https://stackoverflow.com/questions/31955382/slick-carousel-has-0px-width-when-loaded-in-collapsed-tab/32107099#32107099) but I'm not sure if there is another way to achieve the same effect.

[MelihOzcanPXL]

Moving the css imports to the same file as the component fixed this error for me.