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

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

   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 ```
               
            }
    
        }

解决方法

您实际上可以替换默认的下一个和上一个箭头图标。我认为这比向现有 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,display: "block" }}
            onClick={onClick}
        >
            <div className="artilces-slider-right-arrow">
                {/* this is font awesome icons */}
                <i class="fas fa-angle-right"></i>
            </div>
        </div>
    );
}