在 Bootstrap 选项卡面板中创建 cycle2-carousel

Creating cycle2-carousel inside Bootstrap tab panel

我需要在多个 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 inspector/console 并选择第二个选项卡面板时，轮播会正确呈现并运行。

此时，单击第一个选项卡会显示第一个选项卡面板现在呈现不正确。此外，在此阶段关闭 Chrome 检查器实际上修复了第一个选项卡面板的错误呈现内容。

这可能是 Cycle2 的错误，还是我在这里遗漏了什么？

今天早上我又想了想，想到了在选项卡点击事件中重新初始化轮播：

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

目前看来它工作得很好。更新了 jsfiddle here.