javascript - Slick's carousel space between images

Explanation

I'm using Ken Wheeler's plugin, Slick, in order to create this carousel, but for some reason, the images inside <a> tag doesn't have a equal distance between themselves; some of them are even overlapping. Is there anything that solves it?

Code

$('.carousel').slick({
    arrows: false,
    autoplay: true,
    autoplaySpeed: 1000,
    slidesToShow: 5,
    slidesToScroll: 1,
    responsive: [
        {
            breakpoint: 1024,
            settings: {
                slidesToShow: 4
            }
        },
        {
            breakpoint: 600,
            settings: {
                slidesToShow: 3
            }
        },
        {
            breakpoint: 480,
            settings: {
                slidesToShow: 2
            }
        }
    ]
});

.container {
  margin: 0 auto;
  padding: 40px;
  width: 80%;
  background: #419be0;
}

<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <title></title>

    <link rel="stylesheet" href=".6.0/slick.min.css">

</head>

<body>

    <div class='container'>
        <div class='carousel'>
            <div>
                <a href="#"><img src=".jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src=".jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src=".jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src=".jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src=".jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src=".jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src=".jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src=".jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src=".jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src=".jpg" alt=""></a>
            </div>
        </div>
    </div>

    <script src=".1.1/jquery.min.js"></script>
    <script src=".6.0/slick.min.js"></script>

</body>

</html>

Explanation

Code

$('.carousel').slick({
    arrows: false,
    autoplay: true,
    autoplaySpeed: 1000,
    slidesToShow: 5,
    slidesToScroll: 1,
    responsive: [
        {
            breakpoint: 1024,
            settings: {
                slidesToShow: 4
            }
        },
        {
            breakpoint: 600,
            settings: {
                slidesToShow: 3
            }
        },
        {
            breakpoint: 480,
            settings: {
                slidesToShow: 2
            }
        }
    ]
});

.container {
  margin: 0 auto;
  padding: 40px;
  width: 80%;
  background: #419be0;
}

<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <title></title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/slick-carousel/1.6.0/slick.min.css">

</head>

<body>

    <div class='container'>
        <div class='carousel'>
            <div>
                <a href="#"><img src="http://i.imgur./kkVWQR4.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur./RRWm3lB.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur./2f2pUHi.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur./7TSiIkS.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur./dXxnAnC.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur./kkVWQR4.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur./RRWm3lB.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur./2f2pUHi.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur./7TSiIkS.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur./dXxnAnC.jpg" alt=""></a>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare./ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>

</body>

</html>

Thanks in advance,
Luiz.

Share Improve this question asked Feb 9, 2017 at 13:35 Luiz 1,3154 gold badges19 silver badges35 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 3

$('.carousel').slick({
    variableWidth: true,
    ...
});

variableWidth allows to use slides with different width.

To add space between slides via css you can use this:

.slick-slide {margin-right: 20px;}

The problem is that your images are shown on their original size, which can be bigger than the size of the slides.

Making the a and img fit the slides gets rid of the overlap. You can of course tweak this to have some space between the slides, center the images vertically, et cetera.

Original, but make all images fill slides

$('.carousel').slick({
    arrows: false,
    autoplay: true,
    autoplaySpeed: 1000,
    slidesToShow: 5,
    slidesToScroll: 1,
    responsive: [
        {
            breakpoint: 1024,
            settings: {
                slidesToShow: 4
            }
        },
        {
            breakpoint: 600,
            settings: {
                slidesToShow: 3
            }
        },
        {
            breakpoint: 480,
            settings: {
                slidesToShow: 2
            }
        }
    ]
});

.container {
  margin: 0 auto;
  padding: 40px;
  width: 80%;
  background: #419be0;
}

/* new */
a, img {
  display: block;
  width: 100%;
  height: 100%;
}

<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <title></title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/slick-carousel/1.6.0/slick.min.css">

</head>

<body>

    <div class='container'>
        <div class='carousel'>
            <div>
                <a href="#"><img src="http://i.imgur./kkVWQR4.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur./RRWm3lB.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur./2f2pUHi.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur./7TSiIkS.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur./dXxnAnC.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur./kkVWQR4.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur./RRWm3lB.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur./2f2pUHi.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur./7TSiIkS.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur./dXxnAnC.jpg" alt=""></a>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare./ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>

</body>

</html>

Original, but make all images fill slides and insert space

$('.carousel').slick({
    arrows: false,
    autoplay: true,
    autoplaySpeed: 1000,
    slidesToShow: 5,
    slidesToScroll: 1,
    responsive: [
        {
            breakpoint: 1024,
            settings: {
                slidesToShow: 4
            }
        },
        {
            breakpoint: 600,
            settings: {
                slidesToShow: 3
            }
        },
        {
            breakpoint: 480,
            settings: {
                slidesToShow: 2
            }
        }
    ]
});

.container {
  margin: 0 auto;
  padding: 40px;
  width: 80%;
  background: #419be0;
}

/* new */
a {
  display: block;
  width: 100%;
  height: 100%;
}

img {
  display: block;
  width: 90%;
  height: 100%;
  margin: 0 5%;
}

<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <title></title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/slick-carousel/1.6.0/slick.min.css">

</head>

<body>

    <div class='container'>
        <div class='carousel'>
            <div>
                <a href="#"><img src="http://i.imgur./kkVWQR4.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur./RRWm3lB.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur./2f2pUHi.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur./7TSiIkS.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur./dXxnAnC.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur./kkVWQR4.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur./RRWm3lB.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur./2f2pUHi.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur./7TSiIkS.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur./dXxnAnC.jpg" alt=""></a>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare./ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>

</body>

</html>

Original, but use CSS background-image and margin
This makes images fill the available space and inserts space between the images.

$('.carousel').slick({
  arrows: false,
  autoplay: true,
  autoplaySpeed: 1000,
  slidesToShow: 5,
  slidesToScroll: 1,
  responsive: [{
    breakpoint: 1024,
    settings: {
      slidesToShow: 4
    }
  }, {
    breakpoint: 600,
    settings: {
      slidesToShow: 3
    }
  }, {
    breakpoint: 480,
    settings: {
      slidesToShow: 2
    }
  }]
});

.container {
  margin: 0 auto;
  padding: 40px;
  width: 80%;
  background: #419be0;
}

/* new */
.container .slick-slide {
  height: 50px;
  margin: 0 10px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

<link href="https://cdnjs.cloudflare./ajax/libs/slick-carousel/1.6.0/slick.min.css" rel="stylesheet" />

<div class='container'>
  <div class='carousel'>
    <div style="background-image: url('http://i.imgur./kkVWQR4.jpg');">
    </div>
    <div style="background-image: url('http://i.imgur./RRWm3lB.jpg');">
    </div>
    <div style="background-image: url('http://i.imgur./2f2pUHi.jpg');">
    </div>
    <div style="background-image: url('http://i.imgur./7TSiIkS.jpg');">
    </div>
    <div style="background-image: url('http://i.imgur./dXxnAnC.jpg');">
    </div>
    <div style="background-image: url('http://i.imgur./kkVWQR4.jpg');">
    </div>
    <div style="background-image: url('http://i.imgur./RRWm3lB.jpg');">
    </div>
    <div style="background-image: url('http://i.imgur./2f2pUHi.jpg');">
    </div>
    <div style="background-image: url('http://i.imgur./7TSiIkS.jpg');">
    </div>
    <div style="background-image: url('http://i.imgur./dXxnAnC.jpg');">
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>

Original, but use CSS background-image (contain) and margin
This makes images fit in the available space and inserts space between the images.

$('.carousel').slick({
  arrows: false,
  autoplay: true,
  autoplaySpeed: 1000,
  slidesToShow: 5,
  slidesToScroll: 1,
  responsive: [{
    breakpoint: 1024,
    settings: {
      slidesToShow: 4
    }
  }, {
    breakpoint: 600,
    settings: {
      slidesToShow: 3
    }
  }, {
    breakpoint: 480,
    settings: {
      slidesToShow: 2
    }
  }]
});

.container {
  margin: 0 auto;
  padding: 40px;
  width: 80%;
  background: #419be0;
}

/* new */
.container .slick-slide {
  height: 50px;
  margin: 0 10px;
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

<link href="https://cdnjs.cloudflare./ajax/libs/slick-carousel/1.6.0/slick.min.css" rel="stylesheet" />

<div class='container'>
  <div class='carousel'>
    <div style="background-image: url('http://i.imgur./kkVWQR4.jpg');">
    </div>
    <div style="background-image: url('http://i.imgur./RRWm3lB.jpg');">
    </div>
    <div style="background-image: url('http://i.imgur./2f2pUHi.jpg');">
    </div>
    <div style="background-image: url('http://i.imgur./7TSiIkS.jpg');">
    </div>
    <div style="background-image: url('http://i.imgur./dXxnAnC.jpg');">
    </div>
    <div style="background-image: url('http://i.imgur./kkVWQR4.jpg');">
    </div>
    <div style="background-image: url('http://i.imgur./RRWm3lB.jpg');">
    </div>
    <div style="background-image: url('http://i.imgur./2f2pUHi.jpg');">
    </div>
    <div style="background-image: url('http://i.imgur./7TSiIkS.jpg');">
    </div>
    <div style="background-image: url('http://i.imgur./dXxnAnC.jpg');">
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Slick's carousel space between images - Stack Overflow

Explanation

Code

Explanation

Code

2 Answers 2

与本文相关的文章

评论列表(0)