Customize Slick slider design with proper space between images

Question

I am using react-slick for carousel feature. I am having a hard time in customizing to get the design like below.

If I try to provide the space between images like in the screenshot, the other images get pushed away and totally disappear.

Here is my code:

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"));

I have working code on codesandbox either. Here it is, https://codesandbox.io/s/react-slick-playground-yqcm3

score 0 · Answer 1 · answered Dec 30 '19 at 08:47

0

See this GitHub issue.

There are some ways of doing what you want, with pure CSS.

Like this one, for instance:

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

answered Dec 30 '19 at 08:47

doing that gave me the same result. Can you check it on sandbox( https://codesandbox.io/s/react-slick-playground-yqcm3) on full view, please? It did not fixed mine. – Serenity Dec 30 '19 at 09:33
Have you looked at the GitHub issue? There are lots of solutions there – Dec 30 '19 at 09:36

akhtarvahid · Answer 2 · 2019-12-30T09:36:25.907

0

Change this at two places.

1-

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

2-

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

edited Dec 30 '19 at 09:36

answered Dec 30 '19 at 09:15

akhtarvahid

9,445
2
26
29

I want the height of an image to be around 400-500px. – Serenity Dec 30 '19 at 09:31
@Serenity check i changed. ... you also can change min-height as much as you want – akhtarvahid Dec 30 '19 at 09:37

Customize Slick slider design with proper space between images

2 Answers2