Slick在图像之间的旋转木马空间

时间：2017-02-09 13:35:08

标签： javascript jquery css

说明

我正在使用Ken Wheeler的插件Slick来创建此轮播，但出于某种原因，<a>标记内的图像之间的距离不同;其中一些甚至是重叠的。有什么能解决它吗？

代码

$('.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.com/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.com/kkVWQR4.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur.com/RRWm3lB.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur.com/2f2pUHi.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur.com/7TSiIkS.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur.com/dXxnAnC.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur.com/kkVWQR4.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur.com/RRWm3lB.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur.com/2f2pUHi.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur.com/7TSiIkS.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur.com/dXxnAnC.jpg" alt=""></a>
            </div>
        </div>
    </div>

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

</body>

</html>

提前致谢，
路易斯。

2 个答案:

答案 0 :(得分：2)

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

variableWidth允许使用不同宽度的幻灯片。

要通过css在幻灯片之间添加空格，您可以使用：

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

答案 1 :(得分：1)

问题是您的图像以原始尺寸显示，可能比幻灯片的尺寸大。

使a和img适合幻灯片摆脱重叠。你当然可以调整它以在幻灯片之间留出一些空间，使图像垂直居中，等等。

原创，但让所有图片填充幻灯片 

$('.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.com/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.com/kkVWQR4.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur.com/RRWm3lB.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur.com/2f2pUHi.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur.com/7TSiIkS.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur.com/dXxnAnC.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur.com/kkVWQR4.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur.com/RRWm3lB.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur.com/2f2pUHi.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur.com/7TSiIkS.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur.com/dXxnAnC.jpg" alt=""></a>
            </div>
        </div>
    </div>

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

</body>

</html>

原创，但让所有图片填充幻灯片并插入空格 

$('.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.com/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.com/kkVWQR4.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur.com/RRWm3lB.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur.com/2f2pUHi.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur.com/7TSiIkS.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur.com/dXxnAnC.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur.com/kkVWQR4.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur.com/RRWm3lB.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur.com/2f2pUHi.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur.com/7TSiIkS.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="http://i.imgur.com/dXxnAnC.jpg" alt=""></a>
            </div>
        </div>
    </div>

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

</body>

</html>

原创，但使用CSS background-image和保证金
这使图像填充可用空间并在图像之间插入空间。

$('.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.com/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.com/kkVWQR4.jpg');">
    </div>
    <div style="background-image: url('http://i.imgur.com/RRWm3lB.jpg');">
    </div>
    <div style="background-image: url('http://i.imgur.com/2f2pUHi.jpg');">
    </div>
    <div style="background-image: url('http://i.imgur.com/7TSiIkS.jpg');">
    </div>
    <div style="background-image: url('http://i.imgur.com/dXxnAnC.jpg');">
    </div>
    <div style="background-image: url('http://i.imgur.com/kkVWQR4.jpg');">
    </div>
    <div style="background-image: url('http://i.imgur.com/RRWm3lB.jpg');">
    </div>
    <div style="background-image: url('http://i.imgur.com/2f2pUHi.jpg');">
    </div>
    <div style="background-image: url('http://i.imgur.com/7TSiIkS.jpg');">
    </div>
    <div style="background-image: url('http://i.imgur.com/dXxnAnC.jpg');">
    </div>
  </div>
</div>

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

原创，但使用CSS background-image（contain）和保证金
这使得图像适合可用空间并在图像之间插入空间。

$('.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.com/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.com/kkVWQR4.jpg');">
    </div>
    <div style="background-image: url('http://i.imgur.com/RRWm3lB.jpg');">
    </div>
    <div style="background-image: url('http://i.imgur.com/2f2pUHi.jpg');">
    </div>
    <div style="background-image: url('http://i.imgur.com/7TSiIkS.jpg');">
    </div>
    <div style="background-image: url('http://i.imgur.com/dXxnAnC.jpg');">
    </div>
    <div style="background-image: url('http://i.imgur.com/kkVWQR4.jpg');">
    </div>
    <div style="background-image: url('http://i.imgur.com/RRWm3lB.jpg');">
    </div>
    <div style="background-image: url('http://i.imgur.com/2f2pUHi.jpg');">
    </div>
    <div style="background-image: url('http://i.imgur.com/7TSiIkS.jpg');">
    </div>
    <div style="background-image: url('http://i.imgur.com/dXxnAnC.jpg');">
    </div>
  </div>
</div>

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

相关问题
最新问题