顶部带有箭头的 React 水平滚动卡片
React Horizontal Scrolling cards with Arrows on top
目前我正在使用 React-slick 作为我的水平卡片滚动视图,但输出并不是我真正想要的。我想要实现的是:
前面的 1 张卡片和后面的 1 张卡片显示一半,箭头与前后卡片重叠。
但目前我的箭头出现在卡片的开头和结尾,所有卡片都同样适合一页。
代码沙箱:https://codesandbox.io/s/gallant-chaplygin-jydsu?file=/src/App.tsx
代码:
function SampleNextArrow(props) {
const { className, style, onClick } = props;
return (
<div className={className} style={{ background: "#fff" }} onClick={onClick}>
<img
style={{ width: "20px" }}
src="https://www.pngfind.com/pngs/m/302-3023323_arrow-pointing-to-right-comments-right-arrow-png.png"
/>
</div>
);
}
function SamplePrevArrow(props) {
const { className, style, onClick } = props;
return (
<div className={className} style={{ background: "#fff" }} onClick={onClick}>
<img
style={{ width: "20px" }}
src="https://toppng.com/uploads/preview/arrow-pointing-to-the-left-115501167743epfu1fapc.png"
/>
</div>
);
}
export default class Responsive extends Component {
render() {
var settings = {
dots: true,
infinite: false,
speed: 500,
slidesToShow: 4,
slidesToScroll: 4,
initialSlide: 0,
nextArrow: <SampleNextArrow />,
prevArrow: <SamplePrevArrow />,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
initialSlide: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
};
return (
<div>
<h2> Responsive </h2>
<Slider {...settings}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
</Slider>
</div>
);
}
}
您需要自定义 slack css
并更改默认 slack
样式。将波纹管样式添加到已导入到组件的 css
:
.slick-prev {
left: 0 !important;
z-index: 1000;
}
.slick-prev:before {
content: "";
}
.slick-next {
right: 0 !important;
z-index: 1000;
}
.slick-next:before {
content: "";
}
同样为了显示不适合模式的卡片,您需要将 centerMode
设置添加到 slack settings
:
className: "center",
centerMode: true,
centerPadding: "60px",
另外,添加这些样式:
.center .slick-center h3 {
opacity: 1;
-ms-transform: scale(1.08);
transform: scale(1.08);
}
h3 {
background: #5f9ea0;
color: #fff;
font-size: 36px;
line-height: 100px;
margin: 10px;
padding: 2%;
position: relative;
text-align: center;
}
目前我正在使用 React-slick 作为我的水平卡片滚动视图,但输出并不是我真正想要的。我想要实现的是:
前面的 1 张卡片和后面的 1 张卡片显示一半,箭头与前后卡片重叠。 但目前我的箭头出现在卡片的开头和结尾,所有卡片都同样适合一页。
代码沙箱:https://codesandbox.io/s/gallant-chaplygin-jydsu?file=/src/App.tsx
代码:
function SampleNextArrow(props) {
const { className, style, onClick } = props;
return (
<div className={className} style={{ background: "#fff" }} onClick={onClick}>
<img
style={{ width: "20px" }}
src="https://www.pngfind.com/pngs/m/302-3023323_arrow-pointing-to-right-comments-right-arrow-png.png"
/>
</div>
);
}
function SamplePrevArrow(props) {
const { className, style, onClick } = props;
return (
<div className={className} style={{ background: "#fff" }} onClick={onClick}>
<img
style={{ width: "20px" }}
src="https://toppng.com/uploads/preview/arrow-pointing-to-the-left-115501167743epfu1fapc.png"
/>
</div>
);
}
export default class Responsive extends Component {
render() {
var settings = {
dots: true,
infinite: false,
speed: 500,
slidesToShow: 4,
slidesToScroll: 4,
initialSlide: 0,
nextArrow: <SampleNextArrow />,
prevArrow: <SamplePrevArrow />,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
initialSlide: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
};
return (
<div>
<h2> Responsive </h2>
<Slider {...settings}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
</Slider>
</div>
);
}
}
您需要自定义 slack css
并更改默认 slack
样式。将波纹管样式添加到已导入到组件的 css
:
.slick-prev {
left: 0 !important;
z-index: 1000;
}
.slick-prev:before {
content: "";
}
.slick-next {
right: 0 !important;
z-index: 1000;
}
.slick-next:before {
content: "";
}
同样为了显示不适合模式的卡片,您需要将 centerMode
设置添加到 slack settings
:
className: "center",
centerMode: true,
centerPadding: "60px",
另外,添加这些样式:
.center .slick-center h3 {
opacity: 1;
-ms-transform: scale(1.08);
transform: scale(1.08);
}
h3 {
background: #5f9ea0;
color: #fff;
font-size: 36px;
line-height: 100px;
margin: 10px;
padding: 2%;
position: relative;
text-align: center;
}