reactjs - 如何设计 React Slick carrousel 的箭头样式?
问题描述
我试图创建一个轮播组件,它将占用父容器的 100% 宽度和高度(它应该能够全屏显示)。我添加了一个自定义箭头,但我无法设置它的样式。
如何达到这样的效果?
这是我的代码和沙箱:
const ArrowLeft = (props) => (
<button style={{background:"red", border: 0}} {...props} className={'prev'}>
back
</button>
);
const settings = {
dots: true,
infinite: true,
speed: 1000,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
lazyLoad: true,
centerMode: true,
adaptiveHeight: true,
fade: true,
arrows: true,
prevArrow: <ArrowLeft />,
autoplaySpeed: 5000,
className: "slides"
};
const images = [
"https://static.toiimg.com/photo/72975551.cms",
"https://www.gettyimages.fr/gi-resources/images/500px/983794168.jpg",
"https://www.freedigitalphotos.net/images/img/homepage/394230.jpg"
];
const StyledSlider = styled(Slider)``;
const Image = styled.div`
background-size: cover;
background: ${(props) => `url(${props.src}) no-repeat center`};
width: 100%;
height: 500px; // how to add an auto 100% width?
`;
export default function App() {
return (
<StyledSlider {...settings}>
{images.map((image, i) => {
return (
<div key={i}>
<Image src={image} alt="img" />
</div>
);
})}
</StyledSlider>
);
}
https://codesandbox.io/s/craky-noether-1hdhr?file=/src/App.js
任何帮助将不胜感激!
解决方案
react-slick 传递自己的样式,您可以将其传播到的样式对象中<Button>
(请参阅:https ://react-slick.neostack.com/docs/example/custom-arrows )。然后,您可以添加或覆盖您想要的任何样式。
下面的修复使用您的代码沙箱中的代码(工作分叉在这里:https ://codesandbox.io/s/lucid-roentgen-bie3j?file=/src/App.js )。
const Arrow = ({ className, style, onClick }) => (
<Button style={{...style, left: 0, backgroundColor: 'red'}} onClick={onClick} className={className}>
<div>back</div>
</Button>
);
const settings = {
...
prevArrow: <Arrow />
};
推荐阅读
- android - 程序类型已经存在:javax.annotation.CheckReturnValue
- python-3.x - 如何在python3中刷新变量
- r - addRSI 图的 Y 尺度 [Quantmod]
- javascript - 从数据中创建树视图
- apache-spark - 通过 spark 数据框将整行作为参数传递给 spark udf - 抛出 AnalysisException
- javascript - 函数组件不能有引用。你的意思是使用 React.forwardRef() 吗?
- python - 在 DataFrame 中使用 dask 进行有效的条件成对行操作的正确方法
- javascript - 从获取请求中发出获取请求
- rasa-nlu - 是否可以直接根据实际数据进行训练?
- math - 将错误状态代码中的字节标志转换为 int