Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Slick slider not working in a flex container

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
});
like image 405
Victor Allegret Avatar asked Aug 30 '17 14:08

Victor Allegret


People also ask

How do you reinitialize slick slider?

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.

How do I change the position on my slick slider dots?

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.

What is carousel in slick?

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.


1 Answers

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'>
      .
      .
      .
like image 139
Baro Avatar answered Sep 19 '22 12:09

Baro