使用React-slick实现带重叠箭头、首尾半显的水平滚动卡片效果

实现方案 #

你需要调整react-slick的配置项和箭头样式，两步即可实现目标效果：

1. 核心修改点 #

• 新增paddingLeft、paddingRight配置：设置容器左右内边距，让首尾卡片可以露出部分区域，数值可根据你需要的半显宽度自定义调整
• 开启infinite: true：启用无限滚动，保证首屏左侧、末屏右侧都有半显卡片
• 自定义箭头组件时保留默认传入的style定位属性，不要覆盖，仅叠加背景、层级等自定义样式
• 调整箭头的左右定位值，提高层级，让箭头叠在首尾卡片上方

修改后的完整代码 #

import React, { Component } from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

function SampleNextArrow(props) {
  const { className, style, onClick } = props;
  return (
    <div 
      className={className} 
      style={{ 
        ...style, 
        background: "#fff", 
        zIndex: 10, 
        right: "10px"
      }} 
      onClick={onClick}
    >
      <img
        style={{ width: "20px" }}
        src="替换为你的右箭头资源地址"
        alt="下一页"
      />
    </div>
  );
}

function SamplePrevArrow(props) {
  const { className, style, onClick } = props;
  return (
    <div 
      className={className} 
      style={{ 
        ...style, 
        background: "#fff", 
        zIndex: 10, 
        left: "10px"
      }} 
      onClick={onClick}
    >
      <img
        style={{ width: "20px" }}
        src="替换为你的左箭头资源地址"
        alt="上一页"
      />
    </div>
  );
}

export default class Responsive extends Component {
  render() {
    var settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 4,
      slidesToScroll: 1, // 可根据需求调整为一次滚动多张，比如你原设置的4
      initialSlide: 0,
      nextArrow: <SampleNextArrow />,
      prevArrow: <SamplePrevArrow />,
      paddingLeft: "40px", // 可自定义半显宽度
      paddingRight: "40px", // 可自定义半显宽度
      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>
    );
  }
}

可选拓展 #

如果需要当前激活卡片居中显示，可以额外添加centerMode: true配置，配合centerPadding参数调整边距即可。

内容的提问来源于stack exchange，提问作者JJM50