在 React-Slick 上修改 CSS

Question

Is there any way to modify React-Slick CSS? I have a UI UX Design to make, and for now I'm using react-slick for a slider but need to change it

The default setting for center mode that created in the doc is like this

this is my code

const settings = {
  className: 'center',
  centerMode: true,
  focusOnSelect: true,
  infinite: true,
  centerPadding: '100px',
  slidesToShow: 3,
  speed: 500,
}
<Slider {...settings}>
  {sliderData.map((slide, index) => {
    return (
      <div key={index}>
        <img
          src={slide.image}
          alt='slider'
          key={index}
          className={slideStyle.image}
        />
      </div>
    )
  })}
</Slider>

Is theres a way to modify the css like this?

https://prnt.sc/12tdow9

Here's the playground

https://codesandbox.io/s/nervous-dhawan-16o7j

Answer 1

Try this example: Demo

your_file.css

.slick-slider {
  position: relative;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
}
.slick-list {
  position: relative;
  display: block !important;
  overflow: hidden;
  padding: 100px !important;
  width: 100%;
}
.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: flex;
}
.slick-slide div {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.slick-slide .image {
  object-fit: cover;
  border-radius: 2px;
  min-width: 150px !important;
  width: 80%;
}
.slick-slide div div span {
  margin-top: 10px;
  width: inherit;
  text-align: center;
  font-size: 0.75rem;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  color: #111;
}

.slick-slide:not(.slick-active) {
  position: relative;
  z-index: 997;
}
.slick-slide.slick-active:not(.slick-current) {
  position: relative;
  z-index: 998;
  transform: scale(1.3);
  transition: 0.25s;
}
.slick-slide.slick-active.slick-current {
  position: relative;
  z-index: 999;
  transform: scale(1.6);
  transition: 0.25s;
}
.slick-slide.slick-active:not(.slick-current) .image,
.slick-slide.slick-active.slick-current .image,
.slick-slide:not(.slick-active) .image {
  width: 100% !important;
}
.slick-prev,
.slick-next {
  display: none !important;
}
.custom-prevArrow,
.custom-nextArrow {
  position: relative;
  z-index: 99999;
  top: -10px;
}
.custom-prevArrow {
  left: -10px;
}
.custom-nextArrow {
  right: -10px;
}
.custom-prevArrow:hover,
.custom-nextArrow:hover {
  fill: red;
  cursor: pointer;
}