javascript - 顶部带有箭头的 React 水平滚动卡片

Question

目前我正在使用 React-slick对于我的水平卡片 ScrollView ，但输出不是我真正想要的。我想要实现的是:

前面的 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>
    );
  }
}

Answer 1

您需要自定义 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;
}