在Bootstrap選項卡面板內創建cycle2-carousel

Question

我需要在一系列Bootstrap選項卡面板中插入一系列轉盤，每個面板一個轉盤。

人們可以看到下面，(jsfiddle here)

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
<style> 
    .span2 { 
    white-space:normal; 
    } 
    .item-block { 
    background-color: #ccc; 
    } 
</style> 
<div class="container"> 
    <div class="row"> 
     <div class="col-md-6"> 
      <div class="panel with-nav-tabs panel-default"> 
       <div class="panel-heading"> 
        <ul class="nav nav-tabs"> 
         <li class="active"><a href="#tab1default" data-toggle="tab">Default 1</a></li> 
         <li><a href="#tab2default" data-toggle="tab">Default 2</a></li> 
        </ul> 
       </div> 
       <div class="panel-body"> 
        <div class="tab-content"> 
         <div class="tab-pane active" id="tab1default"> 
          <div id="slideshow2" class="cycle-slideshow" 
           data-cycle-fx=carousel 
           data-cycle-timeout=0 
           data-cycle-carousel-visible=1 
           data-cycle-carousel-fluid=true 
           data-cycle-pager="#pager1" 
           data-cycle-pager-template="<a href='#'><i class='fa fa-square' aria-hidden='true'></i></a>" 
           data-cycle-slides="> .span2" 
           > 
           <div class="pull-left cycle-prev"><a href="#"><i class="fa fa-chevron-left" aria-hidden="true"></i> Prev</a></div> 
           <div class="pull-right cycle-next"><a href="#">Next <i class="fa fa-chevron-right" aria-hidden="true"></i></a></div> 
           <div class="span2"> 
            <div class="item-block col-md-4"> 
             <img class="img-responsive" src="http://lorempixel.com/200/200/"> 
             <div class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus molestie porta leo, eget varius sem elementum eget. Fusce ullamcorper odio lacus, id auctor urna vulputate a. Vestibulum accumsan tortor ac massa aliquet, at feugiat metus faucibus. Phasellus sagittis dui at accumsan interdum. Vivamus eget tempus est. Curabitur semper feugiat risus, id consequat leo fermentum in. Suspendisse tristique interdum orci id pharetra. Sed sit amet sodales massa. </div> 
            </div> 
            <div class="item-block col-md-4"> 
             <img class="img-responsive" src="http://lorempixel.com/200/200/"> 
             <div class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus molestie porta leo, eget varius sem elementum eget. Fusce ullamcorper odio lacus, id auctor urna vulputate a. Vestibulum accumsan tortor ac massa aliquet, at feugiat metus faucibus. Phasellus sagittis dui at accumsan interdum. Vivamus eget tempus est. Curabitur semper feugiat risus, id consequat leo fermentum in. Suspendisse tristique interdum orci id pharetra. Sed sit amet sodales massa. </div> 
            </div> 
            <div class="item-block col-md-4"> 
             <img class="img-responsive" src="http://lorempixel.com/200/200/"> 
             <div class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus molestie porta leo, eget varius sem elementum eget. Fusce ullamcorper odio lacus, id auctor urna vulputate a. Vestibulum accumsan tortor ac massa aliquet, at feugiat metus faucibus. Phasellus sagittis dui at accumsan interdum. Vivamus eget tempus est. Curabitur semper feugiat risus, id consequat leo fermentum in. Suspendisse tristique interdum orci id pharetra. Sed sit amet sodales massa. </div> 
            </div> 
           </div> 
           <div class="span2"> 
            <div class="col-md-4"> 
             <img class="img-responsive" src="http://lorempixel.com/200/200/"> 
             <div class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus molestie porta leo, eget varius sem elementum eget. Fusce ullamcorper odio lacus, id auctor urna vulputate a. Vestibulum accumsan tortor ac massa aliquet, at feugiat metus faucibus. Phasellus sagittis dui at accumsan interdum. Vivamus eget tempus est. Curabitur semper feugiat risus, id consequat leo fermentum in. Suspendisse tristique interdum orci id pharetra. Sed sit amet sodales massa. </div> 
            </div> 
            <div class="col-md-4"> 
             <img class="img-responsive" src="http://lorempixel.com/200/200/"> 
             <div class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus molestie porta leo, eget varius sem elementum eget. Fusce ullamcorper odio lacus, id auctor urna vulputate a. Vestibulum accumsan tortor ac massa aliquet, at feugiat metus faucibus. Phasellus sagittis dui at accumsan interdum. Vivamus eget tempus est. Curabitur semper feugiat risus, id consequat leo fermentum in. Suspendisse tristique interdum orci id pharetra. Sed sit amet sodales massa. </div> 
            </div> 
            <div class="col-md-4"> 
             <img class="img-responsive" src="http://lorempixel.com/200/200/"> 
             <div class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus molestie porta leo, eget varius sem elementum eget. Fusce ullamcorper odio lacus, id auctor urna vulputate a. Vestibulum accumsan tortor ac massa aliquet, at feugiat metus faucibus. Phasellus sagittis dui at accumsan interdum. Vivamus eget tempus est. Curabitur semper feugiat risus, id consequat leo fermentum in. Suspendisse tristique interdum orci id pharetra. Sed sit amet sodales massa. </div> 
            </div> 
           </div> 
          </div> 
          <div class="text-center cycle-pager" id="pager1"></div> 
         </div> 
         <div class="tab-pane" id="tab2default"> 
          <div id="slideshow1" class="cycle-slideshow" 
           data-cycle-fx=carousel 
           data-cycle-timeout=0 
           data-cycle-carousel-visible=1 
           data-cycle-carousel-fluid=true 
           data-cycle-pager="#pager2" 
           data-cycle-pager-template="<a href='#'><i class='fa fa-square' aria-hidden='true'></i></a>" 
           data-cycle-slides="> .span2" 
           > 
           <div class="pull-left cycle-prev"><a href="#"><i class="fa fa-chevron-left" aria-hidden="true"></i> Prev</a></div> 
           <div class="pull-right cycle-next"><a href="#">Next <i class="fa fa-chevron-right" aria-hidden="true"></i></a></div> 
           <div class="span2"> 
            <div class="item-block col-md-4"> 
             <img class="img-responsive" src="http://lorempixel.com/200/200/"> 
             <div class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus molestie porta leo, eget varius sem elementum eget. Fusce ullamcorper odio lacus, id auctor urna vulputate a. Vestibulum accumsan tortor ac massa aliquet, at feugiat metus faucibus. Phasellus sagittis dui at accumsan interdum. Vivamus eget tempus est. Curabitur semper feugiat risus, id consequat leo fermentum in. Suspendisse tristique interdum orci id pharetra. Sed sit amet sodales massa. </div> 
            </div> 
            <div class="item-block col-md-4"> 
             <img class="img-responsive" src="http://lorempixel.com/200/200/"> 
             <div class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus molestie porta leo, eget varius sem elementum eget. Fusce ullamcorper odio lacus, id auctor urna vulputate a. Vestibulum accumsan tortor ac massa aliquet, at feugiat metus faucibus. Phasellus sagittis dui at accumsan interdum. Vivamus eget tempus est. Curabitur semper feugiat risus, id consequat leo fermentum in. Suspendisse tristique interdum orci id pharetra. Sed sit amet sodales massa. </div> 
            </div> 
            <div class="item-block col-md-4"> 
             <img class="img-responsive" src="http://lorempixel.com/200/200/"> 
             <div class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus molestie porta leo, eget varius sem elementum eget. Fusce ullamcorper odio lacus, id auctor urna vulputate a. Vestibulum accumsan tortor ac massa aliquet, at feugiat metus faucibus. Phasellus sagittis dui at accumsan interdum. Vivamus eget tempus est. Curabitur semper feugiat risus, id consequat leo fermentum in. Suspendisse tristique interdum orci id pharetra. Sed sit amet sodales massa. </div> 
            </div> 
           </div> 
           <div class="span2"> 
            <div class="col-md-4"> 
             <img class="img-responsive" src="http://lorempixel.com/200/200/"> 
             <div class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus molestie porta leo, eget varius sem elementum eget. Fusce ullamcorper odio lacus, id auctor urna vulputate a. Vestibulum accumsan tortor ac massa aliquet, at feugiat metus faucibus. Phasellus sagittis dui at accumsan interdum. Vivamus eget tempus est. Curabitur semper feugiat risus, id consequat leo fermentum in. Suspendisse tristique interdum orci id pharetra. Sed sit amet sodales massa. </div> 
            </div> 
            <div class="col-md-4"> 
             <img class="img-responsive" src="http://lorempixel.com/200/200/"> 
             <div class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus molestie porta leo, eget varius sem elementum eget. Fusce ullamcorper odio lacus, id auctor urna vulputate a. Vestibulum accumsan tortor ac massa aliquet, at feugiat metus faucibus. Phasellus sagittis dui at accumsan interdum. Vivamus eget tempus est. Curabitur semper feugiat risus, id consequat leo fermentum in. Suspendisse tristique interdum orci id pharetra. Sed sit amet sodales massa. </div> 
            </div> 
            <div class="col-md-4"> 
             <img class="img-responsive" src="http://lorempixel.com/200/200/"> 
             <div class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus molestie porta leo, eget varius sem elementum eget. Fusce ullamcorper odio lacus, id auctor urna vulputate a. Vestibulum accumsan tortor ac massa aliquet, at feugiat metus faucibus. Phasellus sagittis dui at accumsan interdum. Vivamus eget tempus est. Curabitur semper feugiat risus, id consequat leo fermentum in. Suspendisse tristique interdum orci id pharetra. Sed sit amet sodales massa. </div> 
            </div> 
           </div> 
          </div> 
          <div class="text-center cycle-pager" id="pager2"></div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
<script src="https://malsup.github.com/jquery.cycle2.js"></script> 
<script src="https://malsup.github.com/jquery.cycle2.carousel.js"></script> 

在第一片面板轉盤做工精細，我們可以在幻燈片之間翻轉。

但是，第二個選項卡面板不能正確呈現轉盤。奇怪的是，當選擇第二個選項卡面板打開Chrome檢查器/控制檯時，傳送帶呈現正確並正常工作。

此時，單擊第一個選項卡顯示第一個選項卡面板現在呈現不正確。此外，在這個階段關閉Chrome檢查器實際上會修復第一個選項卡面板的錯誤渲染內容。

難道這是一個Cycle2的錯誤，或者我只是在這裏失去了一些東西？

Answer 1

今天上午我多一些思考，以及對選項卡單擊事件做轉盤的重新發起的想法：

<script> 
$(document).ready(function() { 
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
     $('.cycle-slideshow').cycle('reinit'); 
    }); 
}); 
</script> 

似乎只是正常工作現在。更新了jsfiddle here。