CODEWITHSUNDEEP
jquerycssresponsiveslidetoggle
Jakedk
Jakedk

Reputation: 101

Responsive images (Slick Slider + SlideToggle)

I have a slick slider filled with responsive background images I want to work smoothly with slideToggle.

How do I make that first click smooth without adding a height to .slider i.imgur.com/4DLO0Nf.gif

HTML

<button type="button" class="show-slider">Show Slider</button>

<div class="slider">
  <div class="addressBox"> <!-- Slide -->
    <div class="pbottom"></div>
    <div class="artwork" style="background-image: url('https://image.tmdb.org/t/p/w640/u7ZpBy8eR50ixjumnkQnCUEbpRa.jpg');"></div>
  </div>
  <div class="addressBox"> <!-- Slide -->
    <div class="pbottom"></div>
    <div class="artwork" style="background-image: url('https://image.tmdb.org/t/p/w640/u7ZpBy8eR50ixjumnkQnCUEbpRa.jpg');"></div>
  </div>
  <div class="addressBox"> <!-- Slide -->
    <div class="pbottom"></div>
    <div class="artwork" style="background-image: url('https://image.tmdb.org/t/p/w640/u7ZpBy8eR50ixjumnkQnCUEbpRa.jpg');"></div>
  </div>
</div>

JS

var $slider = $('.slider').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 3
});

$('.show-slider').on("click", function() {
  $slider.slideToggle().get(0).slick.setPosition();
});

CSS

.slider {
  display: none;
  max-width: 400px;
  background-color: green;
  height: auto;
}

.pbottom {
  padding: 73.125% 0;
}

.artwork {
  background-size: contain;
  width: 100%;
  height: 100%;
  top: 0;
  position: absolute;
}

Demo: https://jsfiddle.net/9zhd87yv/

Upvotes: 1

Views: 1154

Answers (1)

tao
tao

Reputation: 90208

Here is your fixed fiddle: https://jsfiddle.net/9zhd87yv/1/

I had to remove the padding from .arbtbox, do some more adjusting and add position:relative to .addressBox.

.addressBox {
   position: relative;
}

I changed a few more things in it. Don't remember all. I was just trying to make it look better. Feel free to look at differences side-by-side.

Upvotes: 1

Related Questions