Erstellen von cycle2-Karussell innerhalb der Registerkarte Bootstrap

Question

Ich muss eine Reihe von Karussells in einer Reihe von Bootstrap-Registerkarten einfügen, mit einem Karussell pro Panel.

Wie man unten sehen kann, Panel (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> 

das Karussell in dem ersten Registerkarte funktioniert, können wir zwischen den Folien blättern.

Die zweite Registerkarte zeigt das Karussell jedoch nicht korrekt an. Seltsamerweise wird das Karussell korrekt gerendert und funktioniert, wenn der Chrome-Inspektor/die Konsole mit dem zweiten ausgewählten Registerkartenbereich geöffnet wird.

Wenn Sie jetzt auf die erste Registerkarte klicken, wird angezeigt, dass die erste Registerkarte jetzt falsch dargestellt wird. Wenn Sie den Chrome-Inspektor zu diesem Zeitpunkt schließen, werden die fehlerhaften Inhalte des ersten Registerkartenbereichs korrigiert.

Könnte dies ein Fehler mit Cycle2 sein, oder ich vermisse hier nur etwas?

Answer 1

ich es auf der Registerkarte klicken Veranstaltung einige weitere heute morgen dachte, und hatte die Idee, ein reinit des Karussells zu tun:

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

scheint es jetzt ganz gut funktioniert. Die JSFiddle here wurde aktualisiert.