ネストされたタブbootstrap3親タブ内のスライダーにバグがあります

Question

こんにちは私はブートストラップ3のタブを使います。 内のナビゲーションタブ内には3つのtabeペインがあります 最初のタブにはテキストしかありません。 2番目のタブにはスライダがあり、 と3番目にネストされたタブがあります。

私のスライダーネストされたタブは、最初のタブで機能しませんでした。封筒のように消えてしまった。私は戻って（ネストされたタブの）最初のタブのペインに2番​​目の田部ペインに移動した場合しかし、インクルードは

私のjsファイルを表示suddently含んこの

$(document).ready(function() { 
     $('.review-company').slick({ 
      centerMode: true, 
      centerPadding: '60px', 
      slidesToShow: 3, 
      responsive: [ 
      { 
       breakpoint: 768, 
       settings: { 
       arrows: false, 
       centerMode: true, 
       centerPadding: '40px', 
       slidesToShow: 3 
       } 
      }, 
      { 
       breakpoint: 480, 
       settings: { 
       arrows: false, 
       centerMode: true, 
       centerPadding: '40px', 
       slidesToShow: 1 
       } 
      } 
      ] 
     }); 
    }); 

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

のようなものですmyworkをHERESに

を助けてください

https://jsfiddle.net/cgw57v1L/45/

Answer 1

あなただけのdivのid =「Mfavourite」テキストを含むに「アクティブ」クラスを追加する必要が

、同様のli項目 - 次のように完全なHTML：

<div id="tabs"> 
       <!-- Nav tabs --> 
       <ul id="first-tab" class="nav nav-tabs responsive-tabs capital bold text-center m-b-25"> 
        <li class="active "><a href="#portfolio" role="tab" data-toggle="tab">portfolio</a></li> 
        <li class=""><a href="#recomendation" role="tab" data-toggle="tab">recomendation</a></li> 
        <li class=""><a href="#statistic" role="tab" data-toggle="tab">statistic</a></li> 
       </ul> 

       <!-- Tab panes --> 
       <div class="tab-content"> 
        <div class="tab-pane fade in active" id="portfolio"> 
        <p>lorem</p> 
        </div><!-- tab-pane#portfolio --> 
        <div class="tab-pane fade in" id="recomendation"> 
        <h4 class="bold capital">reviews <span style="font-weight: normal;color: #c2c2c2;">(5)</span></h4> 
        <p class="capital bold">Review from older company</p> 
         <div class="review-company"> 
         <div><img src="http://placehold.it/350x150"></div> 
          <div><img src="http://placehold.it/350x150"></div> 
          <div><img src="http://placehold.it/350x150"></div> 
          <div><img src="http://placehold.it/350x150"></div> 
          <div><img src="http://placehold.it/350x150"></div> 
          <div><img src="http://placehold.it/350x150"></div> 
         </div><!-- Review-company --> 

        </div><!-- tab-pane#recomendation --> 
        <div class="tab-pane fade in" id="statistic"> 
        <h4 class="bold uppercase">portfolio <span style="font-weight: normal;color: #c2c2c2;">(12)</span></h4>  
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo animi in ab sapiente esse possimus cum, sed repellendus ipsa mollitia. Magni eos eligendi animi dolore ipsam totam ipsa. Illo, inventore.</p> 


        <hr> 
        <div id="second-tab"> 
         <div class="top-portfolio"> 
         <h4 class="title capital">lofdm</h4> 
         <!-- Nav tabs --> 
         <ul class="nav nav-tabs responsive-tabs capital bold text-center m-b-25"> 
          <li class="active"><a href="#Mfavorite" role="tab" data-toggle="tab">Most Favorite</a></li> 
          <li class=""><a href="#Mview" role="tab" data-toggle="tab">Most View</a></li> 
          <li class=""><a href="#Mcomment" role="tab" data-toggle="tab">Most Comment</a></li> 
         </ul> 
         <div class="tab-content"> 


<!--HERE-->   <div class="tab-pane fade in active" id="Mfavorite"> 

     <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis dolor illum numquam error deleniti at! Culpa numquam, maiores delectus adipisci, animi cumque. Nobis dignissimos nesciunt distinctio, earum reprehenderit quibusdam omnis. </p> 
          </div> 
          <div class="tab-pane fade in" id="Mview"> 
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non suscipit reprehenderit atque deleniti architecto illum, reiciendis? Voluptatibus nisi vitae nostrum, delectus alias aspernatur, nam doloribus doloremque non facilis aliquam perspiciatis!</p> 
          </div> 
          <div class="tab-pane fade in" id="Mcomment"> 
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus culpa sunt sed temporibus molestiae, dolorem aliquam quasi consectetur eius voluptates.</p> 
          </div> 
         </div> 
         </div> 
        </div> 
        </div><!-- statistic --> 
       </div><!-- tab-content --> 
       </div><!-- tabs -->