CODEWITHSUNDEEP
javascripthtmlcssbootstrap-4slick.js
Greyfrog
Greyfrog

Reputation: 1016

SlickJS vertically aligned slides on load but on interaction with arrows fix the layout

I have created a demo to show my problem. When you go to the contact section you will see all the slickJS slide stack vertically but as soon as you click on the arrow or slide the content or interact with any slide, it fixes itself. Problem appears only on load.

Here is the demo codepen

$(".demo-slider").slick({  
  slidesToShow: 4,
  slideToScroll:1, 
  infinite: true,
  arrow:true
});

Upvotes: 1

Views: 1102

Answers (1)

lucasreta
lucasreta

Reputation: 938

I fixed the issue by triggering slick.js' refresh event when the contact tab is shown, like this:

$(".demo-slider").slick({  
  slidesToShow: 4,
  slideToScroll:1, 
  infinite: true,
  arrow:true
});

$('#nav-contact-tab').on('shown.bs.tab', function (e) {
  $('.demo-slider').slick('refresh');
});

You can see my fork in codepen.

Upvotes: 2

Related Questions