CODEWITHSUNDEEP
reactjsreact-nativecarouselreact-slick
Fredrick Aniebonam
Fredrick Aniebonam

Reputation: 3

Customizing the slides in react slick

I'm using react-slick carousel to display cards and I want to reduce the default spacing to make it smaller and can't seem to use tailwind and vanilla CSS to effectively target it

I tried using styles on the components but it wasn't responding. I also tried using the styles props to see if I can get to change the styles but it didn't work.

import React from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import { actCard1, orangeLocation, ratingStar } from "../../assets";
import { Button } from "../Button/Button";

export const CardSlider = () => {
  const settings = {
    dots: false,
    infinite: true,
    speed: 500,
    slidesToShow: 3,
    slidesToScroll: 1,
  };
  return (
    <div className="slider-container">
      <Slider {...settings} className="flex gap-3">
        <div>card img</div>
        <div>card img</div>
        <div>card img</div>  
      </Slider>
    </div>
  );
};

Upvotes: 0

Views: 59

Answers (0)

Related Questions