Slick: Picture stacking vertically and no sliders.

Created on 12 Aug 2017 · 4Comments · Source: kenwheeler/slick

The pictures i put in are stacking vertically and i don't know why, also the carousel is not functioning at all, probably because of the vertical stack.

HTML:
in head

  <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
  <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>

in body

<body>
<div id="Midsection">
  <section class="carousel-container">
    <div class="carousel">
      <div><img src="Bilder\PC07.jpg" alt=""></div>
      <div><img src="Bilder\PC07.jpg" alt=""></div>
      <div><img src="Bilder\PC07.jpg" alt=""></div>
    </div>
  </section>
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('.carousel-container').slick({
    dots: true,
    infinite: true,
    centerMode: true,
    slidesToShow: 3,
    slidesToScroll: 3
  });
});
</script>
</body>

CSS:

body {
  background-color: #2a2a2a;
  z-index: 1;
  width: 100%;
  margin: 0;
}
#Midsection {
  left: 20%;
  background-color: #545454;
  width: 60%;
  min-height: 300px;
  z-index: 2;
  overflow: auto;
  position: relative;
}
.carousel-container {
  width: 95%;
  margin: 20px 0 20px 2.5%;
  background: rgba(0, 0, 0, 0.6);
  height: 200px;
  position: relative;
}
.carousel {
  width: 90%;
}
.slick-slide {
  margin: 10px 0 30px 0;
}
.slick-slide img {
  height: 160px;
  width: auto;
}

It's supposed to look approximately like this:
https://pasteboard.co/GFmpSdf.png
but it looks like this:
https://pasteboard.co/GFmqmUg.png

Source

crispybagel

Most helpful comment

I had a similar issue (items stacking vertically) and it was ultimately a css issue. I had forgotten to import the slick.scss file.

matthewhegarty on 18 Aug 2017

👍8 ❤3 😄3 🚀1 🎉1

All 4 comments

I had a similar issue (items stacking vertically) and it was ultimately a css issue. I had forgotten to import the slick.scss file.

matthewhegarty on 18 Aug 2017

👍8 ❤3 😄3 🚀1 🎉1

I need to revive this, because I have the same issue and I did import the slick files.

I am using Knockout.js to populate the slider with content I am fetching from an API. This is my .html right now:

[...]
 <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.0/slick-theme.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.0/slick.css" rel="stylesheet"/>
</head>
<body><script async></script>

<div id="carousel">
            <!-- #region card do plano -->
            <!-- ko foreach: planos -->
            <div class="mt-4 m-2">
              <div class="card card-plano">
... card content...
</div>
</div>
            <!-- /ko -->
            <!-- #endregion -->
</div>
<script src="assets/js/jquery-3.3.1.slim.min.js" type="text/javascript"></script>
<script src="assets/js/popper.min.js" type="text/javascript"></script>
<script src="assets/js/bootstrap.min.js" type="text/javascript"></script>
<script src='assets/bower_components/knockout/dist/knockout.js' type='text/javascript'></script>
<script src="assets/js/ko-models.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.0/slick.js"></script>
</body>

If I inspect the slider with Chrome, it will show every card wrapped by a 100% width .slick-list.draggable. I have tried setting .slick-list { width: auto !important; } or other fixed values, but it will not apply.

Important: if I set <div id="carousel"> with display: flex, it will solve the items stacking on top of each other, but then .slick-list width's gets smaller so every card is showed in one slide (and there are no prev/next buttons).
This is my ko-model.js file (I have tried putting slick's code in html too to no avail):

    $("#carousel").slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3,
        arrows: true,
        dots: true,
        draggable: true,
        variableWidth: true
    });

majorsaaam on 2 Feb 2019

the same issue, slides stacked on top of each other
nothing help

carouselSettings: {
                // 'accessibility':   false,
                'arrows':          false,
                // 'dots':            false,
                // 'autoplay':        false,
                // 'vertical':        false,
                // 'verticalSwiping': false,
                // 'infinite':        false,
                //
                // 'rows':1,

                'centerMode':    true,
                // 'focusOnSelect': true,
                // 'variableWidth': true,
                'centerPadding': '0px',
                'slidesToShow':  2,
                //
                //
                // 'touchThreshold': 1,
                // 'slidesToScroll': 1,
            },