React Slick dots doesnt show

Question

I using slick slider but even i add dots:true i cant see dots on my screen.

My settings :

 const settings = {
    dots: true,
    customPaging: function (i) {
      return <LazyLoadImage src={productDetails.Images[i]} />; //I want image as a dot. (even i make it simple text its still doesnt show.)
    },
    dotsClass: "slick-dots slick-thumb",
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
  };

I installed react-slick and slick-carousel too. I import css and Slider like :

import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

But it doesnt work. What can i do? Thanks for all responses!

Edit: I dont have overflow:hidden

Answer 1

You pass just a string to an src attribute. Add a colon before it

<LazyLoadImage :src={productDetails.Images[i]}