CODEWITHSUNDEEP
cssvertical-alignmentslick.js
Sandro
Sandro

Reputation: 487

Vertical align content slickslider

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
        } 
    }]
});

Upvotes: 24

Views: 36929

Answers (4)

Kevin Triplett
Kevin Triplett

Reputation: 582

apetrakow, one of slick's devs, responded to an issue with this question.

https://github.com/kenwheeler/slick/issues/2351

you can vertical-align the slides, when you disable the floats and assign display:inline-block; to them.

Just add this one:

.slick-slide {
    display: inline-block;
    vertical-align: middle;
    float:none;
}

Upvotes: 0

Umang Bhalani
Umang Bhalani

Reputation: 41

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.

Upvotes: 0

Simon
Simon

Reputation: 1125

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

Upvotes: 63

BitRyder824
BitRyder824

Reputation: 61

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/

Upvotes: 1

Related Questions