CODEWITHSUNDEEP
javascripthtmlcssbootstrap-4slick.js
Caroline Olivia
Caroline Olivia

Reputation: 356

Slick slider doesn't work in bootstrap dropdown

I have bootstrap navigation with a dropdown, witch inside of it, i want to have a slick slider.

But it lays all the items together when opening the dropdown.

It works fine outside of the dropdown and it works if giving the dropdown the class show.

Codepin

Slick js code:

$(document).ready(function(){
 $('.slider').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 3,
 });
});

Please help!

Upvotes: 2

Views: 722

Answers (2)

sharun k k
sharun k k

Reputation: 467

the problem is regarding the initiation of the slide. it is actually happening when it is hidden. Add an id to the dropdown and initiate the slider after that. like

$("#your-div").on('click',()=>{
   do the loading of slider 
})

Upvotes: 0

Alexandre Elshobokshy
Alexandre Elshobokshy

Reputation: 10922

Just add an id to your parent div and then manually resize it. The problem occurs because the plugin is initialized while being hidden, and that messes with it's size. So here, we're forcing a resize when the slider becomes visible.

<div class="dropdown-menu" aria-labelledby="navbarDropdown" id="myDropdown"></div>

$("#navbarDropdown").on("click", function() {
  $('.slider').resize();
});

Working fiddle : https://jsfiddle.net/jrkhow17/

Upvotes: 1

Related Questions