22

I've been struggling to get my content vertical aligned but really don't fix it. I tried the adaptiveHeight parameter but it really didn't do what I wanted.

Fiddle: http://jsfiddle.net/fmo50w7n/400

This is what the code looks like HTML:

<section class="slider">
    <div style="width:500px;height:200px">slide1</div>
    <div style="width:500px;height:300px;">slide2</div>
    <div style="width:500px;height:100px;">slide3</div>
</section>

CSS:

$c1: #3a8999;
$c2: #e84a69;

.slider {
    width: auto;
    margin: 30px 50px 50px;
}

.slick-slide {
    background: $c1;
    color: white;
    padding: 40px 0;
    font-size: 30px;
    font-family: "Arial", "Helvetica";
    text-align: center;
}

.slick-prev:before, 
.slick-next:before {
    color: black;    
}

.slick-dots {
    bottom: -30px;
}


.slick-slide:nth-child(odd) {
     background: $c2;
}

JS:

$(".slider").slick({
    autoplay: true,
    dots: true,
    variableWidth:true,
    responsive: [{ 
        breakpoint: 500,
        settings: {
            dots: false,
            arrows: false,
            infinite: false,
            slidesToShow: 2,
            slidesToScroll: 2
        } 
    }]
});
Sandro
  • 467
  • 1
  • 5
  • 15
  • 2
    Not sure about CSS possibilities (slider CSS is dynamically created, as i can see, many classes added on the fly), so, you can do it with jQuery: http://jsfiddle.net/fmo50w7n/403/ – sinisake May 26 '16 at 08:46
  • Thanks a lot! Worked like a charm! – Sandro May 27 '16 at 07:20

3 Answers3

61

This solution works for me:

.slick-track {
  display: flex;
}
.slick-track .slick-slide {
  display: flex;
  height: auto;
  align-items: center;
  justify-content: center;
}

See example here:

https://codepen.io/leggomuhgreggo/pen/mEmzGN

Simon
  • 1,095
  • 2
  • 11
  • 29
  • Yes, flex box does work. Some sliders have issues when changing the auto-generated slides CSS display property and I think I did have issues doing this with slick in the past, but today it works well. – Sambuxc Apr 13 '23 at 09:44
1

I think, you need to put text, the content in paragraph's or headings, this allows you to communicate with only the specific contents instead of the entire div.

Then in your CSS do this:

p {
  margin: auto;
  position: absolute;
  top: 50%; left: 50%;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}

You might have to give a width as well.

What this does is change the origin of where the paragraph is generated not from the top-left corner, but from the center of the element using transform: translate. Then using positioning absolute and the top and left percentages at 50% to align it to the middle of the parents element.

As I'm still learning by myself as well, I'm trying to do my best to help you, best of luck. :)

Source: https://css-tricks.com/centering-percentage-widthheight-elements/

ALXvirtual
  • 61
  • 6
  • Hmm will this also work for images? I've updated the fiddle. http://jsfiddle.net/fmo50w7n/404/ – Sandro May 26 '16 at 08:54
0

I have been trying too solve this problem. I found 2 approaches that can solve the issue.

  1. Make a div container for each slide

.slick-slide .slidecontainer {
    display: inline-block;
    vertical-align: middle;
    float:none;
}
  1. Add display flex and align-items centre to slick-track.

.slick-track
{
    position: relative;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
}

The second approach worked for most usecases.

Umang Bhalani
  • 41
  • 3