CODEWITHSUNDEEP
jqueryhtmlcssslick.js
SVE
SVE

Reputation: 1655

Adaptive Height for vertical Slick slider

I have a slick slider with a vertical orientation:

$('.slider').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  arrows: false,
  dots: false,
  infinite: false,
  centerMode: true,
  vertical: true,
  focusOnSelect: true
});
.slider {
  background: #eee;
  margin: 1rem;
}

.slick-vertical .slick-slide {
  cursor: pointer;
  padding: 1rem;
}

.slick-vertical .slick-slide:hover {
  background: #ddd;
}

.slick-vertical .slick-slide img {
  display: none;
  margin: 0 auto;
}

.slick-slide {
  border: 1px solid #ccc;
  text-align: center;
}

.slick-vertical .slick-slide.slick-current img {
  display: block;
}
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
	  
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>

  
<div class="slider">
  <div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, alias.
    </p>
    
    <img src="https://dummyimage.com/300x150/ccc/fff&text=img-1" alt="">
  </div>
  <div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, alias.
    </p>
    
    <img src="https://dummyimage.com/300x150/ccc/fff&text=img-1" alt="">
  </div>
  <div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, alias.
    </p>
    
    <img src="https://dummyimage.com/300x150/ccc/fff&text=img-1" alt="">
  </div>
  <div>
    <p>
      Lorem ipsum dolor sit amet , consectetur adipisicing elit. Voluptatum, alias.
    </p>
    
    <img src="https://dummyimage.com/300x150/ccc/fff&text=img-1" alt="">
  </div>
  <div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, alias.
    </p>
    
    <img src="https://dummyimage.com/300x150/ccc/fff&text=img-1" alt="">
  </div>
</div>

Each cell contains an image. Images are hidden (.slick-slide. img { display: none; }). If select a block, the image should appear (.slick-slide.slick-current img { display: block; }).

But the slider doesn't work correctly.

How can I fix the slider?

Upvotes: 5

Views: 10177

Answers (2)

Alban Goupil
Alban Goupil

Reputation: 1

$('.your-slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){

       // get the nextSlide as an Object
        var NextSlideDom=$(slick.$slides.get(nextSlide));
       // Add a transition when you're changing the min-height
        $(".your-slider .slick-list").css("transition","min-height 1s ease");

       // Change the height
        $(".your-slider .slick-list").css("min-height",NextSlideDom.height());

    });

Upvotes: 0

Boris Ch
Boris Ch

Reputation: 51

Calculate the heighest slide and set a top/bottom margin for other children.

var maxHeight = -1;
$('.slick-slide').each(function() {
  if ($(this).height() > maxHeight) {
    maxHeight = $(this).height();
  }
});
$('.slick-slide').each(function() {
  if ($(this).height() < maxHeight) {
    $(this).css('margin', Math.ceil((maxHeight-$(this).height())/2) + 'px 0');
  }
});

Upvotes: 5

Related Questions