Slick js mit Bootstrap-Tabs

Question

ich glatt js Schieber mit Bootstrap Registerkarten wie unter

Im ersten Reiter (BEST SELL) zu verwenden, versuchen, funktioniert der Schieber gut. Aber wenn ich zu einem anderen Tab wie TEXT-BOOKS wechsle, zeigt der Slick völlig falsch sogar die gleichen Codes mit dem ersten Tab (BEST SELL).

Aber wenn ich die nächsten Pfeile klicken, um es in die ursprünglichen Registerkarten festgelegt, was ich wie das erste Bild wollte.

 $(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> 

Answer 1

Versuchen Sie folgendes:

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"; 
    } 
    } 
});