React-slick specific carousel with css

Question

I got a problem with my carousel. In the picture below I want my carousel liked that, but I tried many times by editing css it doesn't work. It looks liked my carousel's items aren't centered. I setted on my setting variable to let them show 3 items, but they aren't show 3 items sometimes.

my css.

    .carousel {
    width: 500px;
    height: 200px;
    z-index: 2;
    .slick-list {
      .slick-track {
        .slick-slide {
          width: 100% !important;
        }
        .slick-slide,
        .slick-center {
          display: flex;
          justify-content: center;
          padding: 0px 100px 0px 100px;
          div img {
            width: 200px;
          }
        } 
      }
    }
  }

my code.

 const adsElements = adsList.map((ads, index) => {
    return <Carousels key={`${index}`} value={ads} />;
      });
    
      const changeSlide = {
        beforeChange: function (currentSlide) {
          console.log(currentSlide);
        },
      };
    
      return (
        <Body>
          {!flag.isLoad && !hotel.isLoad && !ads.isLoad ? <></> : <Loading />}
          <Slider {...settings} {...changeSlide} className="carousel">
            {adsElements}
          </Slider>
          <div className="main-frame">
            {flagList.length > 0 && <div className="flag">{flagElements}</div>}
          </div>
        </Body>
      );

My carousel's items those I used .map.

const Carousel = styled.img`
      width: 100%;
      text-decoration: none;
      color: black;
      cursor: pointer;
      @media screen and (max-width: 842px) {
        width: 325px;
        margin-top: 4rem;
      }
      @media screen and (max-width: 428px) {
        height: 650px;
      }
    `;
    
    export default function Carousels(props) {
      const { value, index } = props;
    
      const [currentIndex, setCurrentIndex] = useState(0);
    
      const handleSelect = (selectedIndex, e) => {
        setCurrentIndex(selectedIndex);
      };
    
      return (
        <Carousel
          src={value.photoURL}
          onClick={() => {
            window.open(value.adsURL, "");
          }}
        />
      );
    }

And my settings.

    const settings = {
  dots: true,
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 1,
  swipeToSlide: true,
  centerMode: true,
  arrows: true,
  autoplay: false,
  autoplaySpeed: 3000,
  speed: 500,
  responsive: [
    {
      breakpoint: 428,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 1,
        infinite: true,
        dots: true,
        vertical: false,
      },
    },
  ],
};

React-slick specific carousel with css

0 Answers0