javascript - 带有html的 slider

Question

我正在使用 slick-carousels 元素，因为我想创建某种能够连续显示不同图像的 slider 。

所以我想得到的是类似这样的东西:

So the carousel includes a bunch of images where 4 of them are shown at the same time while the images are centered (top & bottom got the same values).

但是我使用我的代码得到的结果看起来完全像这样 - 真是一团糟:

$(document)
  .ready(function() {
    $('.carousel')
      .slick({
        centerMode: true,
        centerPadding: '60px',
        slidesToShow: 4,
        dots: false,
        prevArrow: false,
        nextArrow: false,
        responsive: [{
          breakpoint: 768,
          settings: {
            arrows: false,
            centerMode: true,
            centerPadding: '40px',
            slidesToShow: 3
          }
        }]
      });
  });

.carousel {
  overflow: hidden;
}

.carousel_slide {
  position: relative;
  margin-left: 2%;
}

.slick-slide {
  float: left;
}

.slick-initialized .slick-slide {
  display: block;
}

#card {
  position: absolute;
  margin-top: 10%;
  background-color: darkgray;
  border-radius: 16px;
  width: 90%;
  height: 30%;
}

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


<div id="card">

  <div class="carousel" data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'>
    <div class="" style="slide">
      <img style="margin: auto; top: 0; bottom: 0; width: 100%" src="http://www.stickpng.com/assets/images/580b585b2edbce24c47b290b.png">
    </div>
    <div class="carousel_slide">
      <img style="margin: auto; top: 0; bottom: 0; width: 100%" src="http://www.stickpng.com/assets/images/580b585b2edbce24c47b290b.png">
    </div>
    <div class="carousel_slide">
      <img style="margin: auto; top: 0; bottom: 0; width: 100%" src="http://www.stickpng.com/assets/images/580b585b2edbce24c47b290b.png">
    </div>
    <div class="carousel_slide">
      <img style="margin: auto; top: 0; bottom: 0; width: 100%" src="http://www.stickpng.com/assets/images/580b585b2edbce24c47b290b.png">
    </div>
  </div>

编辑:

如何编辑我的代码以获得预期的结果？任何帮助将不胜感激。

Answer 1

我不确定是什么原因，但我将类 carousel_slide 添加到 #card 之后的第一个 div 并摆脱了style='slide' 并且我让它工作了。请注意，当您运行此代码段时，您一次只会看到 3 个元素，而不是 4 个。那是因为在您的代码中，您在 768 的断点处将元素计数设置为 3。因此，如果您仍然想要 4，只需更改该数字.

JSFiddle:https://jsfiddle.net/xpvt214o/4687/

$('.carousel')
  .slick({
  centerMode: true,
  centerPadding: '60px',
  slidesToShow: 4,
  dots: false,
  prevArrow: false,
  nextArrow: false,
  responsive: [{
    breakpoint: 768,
    settings: {
      arrows: false,
      centerMode: true,
      centerPadding: '40px',
      slidesToShow: 3
    }
  }]
});

#card {
  position: relative;
  margin-top: 10%;
  background-color: darkgray;
  border-radius: 16px;
  width: 90%;
  height: 30%;
}

.carousel {
  overflow: hidden;
}

.carousel_slide {
  position: relative;
  margin: 0 15px;
}

.slick-slide {
  float: left;
}

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

<div id="card">
  <div class="carousel" data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'>
    <div class="carousel_slide">
      <img style="margin: auto; top: 0; bottom: 0; width: 100%" src="http://www.stickpng.com/assets/images/580b585b2edbce24c47b290b.png">
    </div>
    <div class="carousel_slide">
      <img style="margin: auto; top: 0; bottom: 0; width: 100%" src="http://www.stickpng.com/assets/images/580b585b2edbce24c47b290b.png">
    </div>
    <div class="carousel_slide">
      <img style="margin: auto; top: 0; bottom: 0; width: 100%" src="http://www.stickpng.com/assets/images/580b585b2edbce24c47b290b.png">
    </div>
    <div class="carousel_slide">
      <img style="margin: auto; top: 0; bottom: 0; width: 100%" src="http://www.stickpng.com/assets/images/580b585b2edbce24c47b290b.png">
    </div>
  </div>