javascript - 使用图像之间的适当间距自定义 Slick 滑块设计

Question

我正在使用react-slick轮播功能。我很难定制以获得如下所示的设计。

如果我尝试在屏幕截图中提供图像之间的空间，其他图像就会被推开并完全消失。

这是我的代码：

import React from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";
import Slider from "react-slick";
import "./index.css";

const Container = styled.div`
    min-height: 400px;
    background: #1ab394;
  `,
  StyledSlider = styled(Slider)`
    & .slick-slide img {
      max-width: 100%;
      min-height: 500px;
    }
  `,
  ImageContainer = styled.div`
    position: relative;
    color: white;
    margin: 0 20px;
  `,
  Image = styled.img``,
  BottomLeft = styled.div`
    position: absolute;
    bottom: 8px;
    left: 16px;
  `;

const items = [
  { id: 1, url: "http://placekitten.com/g/400/200", caption: "Cute Kitten" },
  { id: 2, url: "http://placekitten.com/g/400/200", caption: "Cute Kitten" },
  { id: 3, url: "http://placekitten.com/g/400/200", caption: "Cute Kitten" },
  { id: 4, url: "http://placekitten.com/g/400/200", caption: "Cute Kitten" },
  { id: 5, url: "http://placekitten.com/g/400/200", caption: "Cute Kitten" },
  { id: 6, url: "http://placekitten.com/g/400/200", caption: "Cute Kitten" },
  { id: 7, url: "http://placekitten.com/g/400/200", caption: "Cute Kitten" },
  { id: 8, url: "http://placekitten.com/g/400/200", caption: "Cute Kitten" },
  { id: 9, url: "http://placekitten.com/g/400/200", caption: "Cute Kitten" },
  { id: 10, url: "http://placekitten.com/g/400/200", caption: "Cute Kitten" }
];

class ReactSlickDemo extends React.Component {
  render() {
    var settings = {
      slidesToShow: 2,
      slidesToScroll: 1,
      dots: false,
      centerMode: true,
      infinite: true,
      adaptiveHeight: true,
      arrows: false
    };
    return (
      <Container>
        <StyledSlider
          {...settings}
          style={{
            padding: 0,
            width: "100%"
          }}
        >
          {items.map(item => {
            return (
              <div key={item.id}>
                <ImageContainer>
                  <Image src={item.url} />
                  <BottomLeft>{item.caption}</BottomLeft>
                </ImageContainer>
              </div>
            );
          })}
        </StyledSlider>
      </Container>
    );
  }
}

ReactDOM.render(<ReactSlickDemo />, document.getElementById("container"));

我也有关于代码沙盒的工作代码。在这里，https://codesandbox.io/s/react-slick-playground-yqcm3

Answer 1

请参阅此 GitHub 问题。

有一些方法可以用纯 CSS 做你想做的事。

比如这个：

/* the slides */
.slick-slide {
    margin: 0 10px;
}
/* the parent */
.slick-list {
    margin: 0 -10px;
}

Answer 2

在两个地方改变这个。

1-

StyledSlider = styled(Slider)`
    & .slick-slide img {
    min-height: 400px;
    }
  `,

2-

Image = styled.img`
   width:170px;
  `,