时间戳

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

reactjs - 如何在 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 ```
               
            }
    
        }

标签： reactjsslick.jsreact-slick

解决方案

您实际上可以替换默认的下一个和上一个箭头图标。我认为这比向现有的 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>
    );
}

推荐阅读