javascript - 在 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 .