自定义 Slick 滑块设计，在图像之间留出适当的空间

Posted 2023-02-25

【中文标题】自定义 Slick 滑块设计，在图像之间留出适当的空间

【英文标题】：Customize Slick slider design with proper space between images

【发布时间】：2019-12-30 08:39:53

【问题描述】：

我正在使用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

【参考方案1】：

见this GitHub issue。

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

比如这个：

/* the slides */
.slick-slide 
    margin: 0 10px;

/* the parent */
.slick-list 
    margin: 0 -10px;

【讨论】：

这样做给了我同样的结果。你能在沙盒（codesandbox.io/s/react-slick-playground-yqcm3）上查看完整视图吗？它没有修复我的问题。

你看过 GitHub 问题吗？那里有很多解决方案

【参考方案2】：

在两个地方更改它。

1-

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

2-

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

【讨论】：

我希望图像的高度在 400-500px 左右。

@Serenity 检查我已更改。 ...您也可以根据需要更改最小高度