Open crispybagel opened 7 years ago
I had a similar issue (items stacking vertically) and it was ultimately a css issue. I had forgotten to import the slick.scss
file.
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
});
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,
},
This is an old thread, but applying display: inline-block
to my child elements fixed the problem for me.
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
in body
CSS:
It's supposed to look approximately like this: https://pasteboard.co/GFmpSdf.png but it looks like this: https://pasteboard.co/GFmqmUg.png