javascript - 如何在选项卡面板中使用两个轮播？

Question

我需要帮助来管理选项卡面板下的两个不同的帖子轮播。我在两个标签链接下使用 post carousel 简码。所以每个轮播都应该出现在选项卡链接下。我正在使用 WordPress 插件来制作帖子轮播名称 Responsive Posts Carousel。并最初将此代码用于选项卡。

问题是最初事件选项卡正确显示第一个轮播。但是，当我单击第二个选项卡时，它会显示带有 width:0px 的第二个旋转木马。

这里是 the page link .您将看到两个选项卡部分名称“主页”和“个人资料”。

.nav-tabs { border-bottom: 2px solid #DDD; }
    .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { border-width: 0; }
    .nav-tabs > li > a { border: none; color: #666; }
        .nav-tabs > li.active > a, .nav-tabs > li > a:hover { border: none; color: #4285F4 !important; background: transparent; }
        .nav-tabs > li > a::after { content: ""; background: #4285F4; height: 2px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; transform: scale(0); }
    .nav-tabs > li.active > a::after, .nav-tabs > li:hover > a::after { transform: scale(1); }
.tab-nav > li > a::after { background: #21527d none repeat scroll 0% 0%; color: #fff; }
.tab-pane { padding: 15px 0; }
.tab-content{padding:20px}

.card {background: #FFF none repeat scroll 0% 0%; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); margin-bottom: 30px; }

<div class="container">
	<div class="row">
		                                <div class="col-md-12">
                                    <!-- Nav tabs --><div class="card">
                                    <ul class="nav nav-tabs" role="tablist">
                                        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
                                        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>

                                    </ul>

                                    <!-- Tab panes -->
                                    <div class="tab-content">
                                        <div role="tabpanel" class="tab-pane active" id="home">[wcp-carousel id="1596"] </div>
                                        <div role="tabpanel" class="tab-pane" id="profile">[wcp-carousel id="1593"] </div>
                                        
                                    </div>
</div>
                                </div>
	</div>
</div>

Answer 1

使用这个 css

<style>
 .tab-content > .tab-pane {
display:  block !important;
order: 1;
width:  100%;
opacity: 0;
}

.tab-content {
 display:  flex;
 width:  100%;
 flex-wrap:  wrap;
  } 
   .tab-content > .tab-pane.active {
    order: 0;
   position:  absolute;
   opacity:  1;
}
 </style>