Slick js with bootstrap tabs

Question

I am trying to use slick js sliders with Bootstrap tabs like below

In the first tab (BEST SELL), the slider works well. But when I switch to another tab like TEXT-BOOKS, the slick shows totally wrong even the same codes with the first tab(BEST SELL).

But when I click the next arrows it fixed into the original tabs what I wanted like the first picture.

     $(document).on('ready', function() {

        $(".tab2").slick({ 
        setPosition : 0,
        dots: true,
        infinite: true,
        slidesToShow: 5,
        slidesToScroll: 3
      });

      $(".regular").slick({
        dots: true,
        infinite: true,
        slidesToShow: 5,
        slidesToScroll: 3
      });
 });

HTML :

<div id="menu2" class="tab-pane fade ">
  <div class="tab2 slider ">


  <div class="contentbox">
 <img src="images/bk2.png" class="contentbox_img">
 <a href="" class="contentbox_title">The Third Planet</a>
 <p class="contentbox_price">$200.00</p>
  </div>

  <div class="contentbox">
 <img src="images/bk3.png" class="contentbox_img">
 <a href="" class="contentbox_title">The Third Planet</a>
 <p class="contentbox_price">$200.00</p>
  </div>

  <div class="contentbox">
 <img src="images/bk1.png" class="contentbox_img">
 <a href="" class="contentbox_title">The Third Planet</a>
 <p class="contentbox_price">$200.00</p>
  </div>

  <div class="contentbox">
 <img src="images/bk1.png" class="contentbox_img">
 <a href="" class="contentbox_title">The Third Planet</a>
 <p class="contentbox_price">$200.00</p>
  </div>

  <div class="contentbox">
 <img src="images/bk1.png" class="contentbox_img">
 <a href="" class="contentbox_title">The Third Planet</a>
 <p class="contentbox_price">$200.00</p>
  </div>

  <div class="contentbox">
 <img src="images/bk1.png" class="contentbox_img">
 <a href="" class="contentbox_title">The Third Planet</a>
 <p class="contentbox_price">$200.00</p>
  </div>

  <div class="contentbox">
 <img src="images/bk1.png" class="contentbox_img">
 <a href="" class="contentbox_title">The Third Planet</a>
 <p class="contentbox_price">$200.00</p>
  </div>

  <div class="contentbox">
 <img src="images/bk1.png" class="contentbox_img">
 <a href="" class="contentbox_title">The Third Planet</a>
 <p class="contentbox_price">$200.00</p>
  </div>

  </div>

Handsel

can we have your design url, else can u update your code to snippet? – Halm

github.com/YanMyoAung/libraryUI.git – Handsel

Answer 1

This will refresh the slider , it uses the event of bootstrap tabs and refresh the slick slider with 'setPosition'

 $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
     e.target
     e.relatedTarget
     $('#your_slider').slick('setPosition');
 });

Edmond

Answer 2

Try this:

JS:

$(function() {
  function slickInit() {
    $(".regular").slick({
      dots: true,
      infinite: true,
      slidesToShow: 5,
      slidesToScroll: 3
    });
  }
  slickInit();
  $('a[data-toggle="pill"]').on("shown.bs.tab", function(e) {
    $(".regular").slick("unslick");
    slickInit();
  });

  function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
      x.className += " responsive";
    } else {
      x.className = "topnav";
    }
  }
});

Vanatta

A little explanation might be helpful. What's the problem and how does your code solve it? – Unquestioning

Answer 3

Diepon has an amazing solution.

.pill-content > .pill-pane {
    display: block;     /* undo display:none          */
    height: 0;          /* height:0 is also invisible */
    overflow-y: hidden; /* no-overflow                */
}

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

Turbine