我试图让下一个和上一个箭头显示时,我有4个和更多的照片在React光滑,但他们没有出现。它的工作与3张或更少的照片。下面是代码的链接。https://codesandbox.io/s/wyyrl6zz3l
cgh8pdjw1#
它对我的工作CSS的变化
.slick-prev { left: 3% !important; z-index: 1; } .slick-next { right: 3% !important; z-index: 1; }
b1payxdu2#
幻灯片的数量和slidesToShow的设置是很重要的,在你的例子中,你只有4张幻灯片,而它被设置为一次显示4张幻灯片;因此不需要箭头。将slidesToShow设置为小于幻灯片数,即一次设置1张,组件将相应地做出响应。
render() { var settings = { dots: true, slidesToShow: 1, //if this is less than # of slides, arrows and dots will appear };
https://codesandbox.io/s/q9o85r7xz6
rdrgkggo3#
从文档中,您可以编写自定义箭头
function SampleNextArrow(props) { const { className, style, onClick } = props; return ( <div className={className} style={{ ...style, display: "block", background: "red" }} onClick={onClick} /> ); }
function SamplePrevArrow(props) { const { className, style, onClick } = props; return ( <div className={className} style={{ ...style, display: "block", background: "green" }} onClick={onClick} /> ); }
然后将它们添加到设置中
const settings = { dots: true, infinite: true, slidesToShow: 3, slidesToScroll: 1, nextArrow: <SampleNextArrow />, prevArrow: <SamplePrevArrow /> };
检查here文档。一个重要的注意事项是,如果你正在使用react材料,不要将style更改为sx,否则它不会显示,下面是它应该如何显示
style
sx
function SampleNextArrow(props) { const { className, style, onClick } = props return ( <Box className={className} style={{ ...style, display: 'block', background: 'red' }} onClick={onClick} /> ) }
k5ifujac4#
您需要在导入自定义样式文件之前导入这两个文件。唯一的问题是以上两个文件会覆盖您的自定义样式:
import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css";
然后通过检查元素并在样式表中工作来获取类。在我的例子中,它是有效的。
puruo6ea5#
给予这个CSS显示箭头图标。
.slick-slider.slick-initialized { width: 100vw; } .slick-arrow.slick-prev { background: black; } .slick-arrow.slick-next { background: black; }
ncecgwcz6#
.slick-prev:before,.slick-next:before { color: #1175b9; }
6条答案
按热度按时间cgh8pdjw1#
它对我的工作CSS的变化
b1payxdu2#
幻灯片的数量和slidesToShow的设置是很重要的,在你的例子中,你只有4张幻灯片,而它被设置为一次显示4张幻灯片;因此不需要箭头。
将slidesToShow设置为小于幻灯片数,即一次设置1张,组件将相应地做出响应。
https://codesandbox.io/s/q9o85r7xz6
rdrgkggo3#
从文档中,您可以编写自定义箭头
然后将它们添加到设置中
检查here文档。
一个重要的注意事项是,如果你正在使用react材料,不要将
style
更改为sx
,否则它不会显示,下面是它应该如何显示k5ifujac4#
您需要在导入自定义样式文件之前导入这两个文件。唯一的问题是以上两个文件会覆盖您的自定义样式:
然后通过检查元素并在样式表中工作来获取类。在我的例子中,它是有效的。
puruo6ea5#
给予这个CSS显示箭头图标。
ncecgwcz6#