如何将className添加到React slick carousel中的下一个和上一个div中

Question

const BeerSlider = () => {
const settings = {
className: 'center',
dots: true,
infinite: true,
speed: 500,
focusOnSelect: true,
slidesToShow: 3,
centerMode: true,
slidesToScroll: 1,
centerPadding: '230px',
onInit: () => {
```add class prev and next slick slide ```

}

}

Answer 1

您实际上可以替换默认的下一个和上一个箭头图标。我认为这比在现有的CSS类中添加样式要好。

第一路

为现有CSS类添加更多CSS属性

.slick-arrow.slick-next {
// your styles
...
...
}
.slick-arrow.slick-prev {
// your styles
...
...
}

第二路

添加自定义下一个和上一个按钮

const settings = {
className: "center",
dots: true,
infinite: true,
speed: 500,
focusOnSelect: true,
slidesToShow: 3,
centerMode: true,
slidesToScroll: 1,
centerPadding: "230px",
nextArrow: <RightNavButton />,
prevArrow: <LeftNavButton />
};
function LeftNavButton(props) {
const { className, style, onClick } = props;
return (
<div
className="slick-arrow"
style={{ ...style, display: "block" }}
onClick={onClick}
>
<div className="artilces-slider-left-arrow">
{/* this is font awesome icons */}
<i class="fas fa-angle-left"></i> 
</div>
</div>
);
}
function RightNavButton(props) {
const { className, style, onClick } = props;
return (
<div
className="slick-arrow"
style={{ ...style, display: "block" }}
onClick={onClick}
>
<div className="artilces-slider-right-arrow">
{/* this is font awesome icons */}
<i class="fas fa-angle-right"></i>
</div>
</div>
);
}