Создание цикла2-карусели внутри панели вкладок Bootstrap

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.