问题描述
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>
);
}