Как использовать две карусели в панели вкладок?

Question

Мне нужна помощь в управлении двумя разными почтовыми каруселями под панелью вкладок. Я использую шорткод после карусели под ссылкой на две вкладки. Поэтому каждая карусель должна отображаться под вкладкой. И я использую плагин WordPress для создания названия карусели постов Responsive Posts Carousel. И используя этот код для вкладки изначально.

Проблема в том, что изначально активная вкладка правильно отображает первую карусель. Но когда я нажимаю 2-ую вкладку, она показывает 2-ую карусель с width:0px.

Вот ссылка на страницу . Вы увидите две вкладки раздела «Домой» и «Профиль».

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