I'm trying to center vertically a slick carousel (http://kenwheeler.github.io/slick/) in a column. So I use display: flex; align-items: center;
on the column (container of the slick slider) but it breaks the slider.
So I have try to center the carousel with an absolute position or by using flexbox but they both breaks the slick slider.
I hope someone got a css/js/jquery solution for this issue :)
Here a fiddle of the issue : https://jsfiddle.net/victor_allegret/g3dsd78w/
(sorry I have an issue adding slick to the stack overflow snippet)
HTML :
<div class='flex-container'>
<div class='single-item'>
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
<div><h3>6</h3></div>
</div>
</div>
CSS :
.flex-container {
/* Using flexbox */
display: flex;
align-items: center;
/*----*/
margin: 0 auto;
padding: 40px;
height: 500px;
width: 80%;
color: #333;
background: #419be0;
}
.slick-slide {
text-align: center;
color: #419be0;
background: white;
}
JS :
$(".single-item").slick({
dots: true
});
After calling an request, set timeout to initialize slick slider. Do not initialize slick slider at start. Just initialize after an AJAX with timeout. That should work for you.
You can use "appendDots: $(Element)" in the Slick settings. It will append the dots to that element. You can place that element at any location using normal CSS. If you want it over the slide then you can use absolute or relative positioning on the element.
The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators. Official documentation.
Like this ? With absolute position.
.abs-container {
position:absolute;
height:140px;
width:300px;
top:50%;
left:50%;
margin:-70px 0 0 -150px;
color: #333;
background: #419be0;
}
And this with FlexBox.
.flex-container {
position:absolute;
top:0px;
bottom:0px;
width:100%;
height:100%;
/* Using flexbox */
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-content: stretch;
align-items: center;
/*----*/
color: #333;
background: #419be0;
}
.flex-child {
width: 300px;
order: 0;
flex: 0 1 auto;
align-self: center;
}
HTML
<div class='flex-container'>
<div class='flex-child'>
<div class='single-item'>
.
.
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With