在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。