Esto es lo que te propongo:
Lo primero es organizar un poco tu código, estás usando <div class="col-2">
para cada elemento <li>
, con eso estás rompiendo el normal comportamiento de la lista <ul>
, motivo por el cual no funcionan los tabs
como deberían.
Supongo que su uso es para justificar los tabs
, pero para eso ya existe una clase propia de Bootstrap la cual es .nav-fill
.
<ul class="nav nav-tabs nav-fill">
También agregué varios atributos ARIA, que aunque opcionales, son indispensables como buena práctica para las tecnologías de apoyo como lectores de pantalla.
... role="tab" aria-controls="tab_default_1" aria-selected="true">
... role="tabpanel" aria-labelledby="default_1-tab">
Lo segundo es asignar dentro de cada tab
un carrusel único, puedes ver más información en la documentación.
En este punto debemos hacer una pausa, el carrusel está listo y funciona, en el ejemplo más básico trabaja con imágenes, pero tú puedes reemplazar estas imágenes por lo que desees, desde cards
hasta media objects
.
El código que te muestro puede servirte como punto de partida para lo que desees. Solo debes tener especial cuidado en las secciones y en los selectores ID
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<body>
<!-- Sedes -->
<div class="row justify-content-center">
<div class="col-6 text-center">
<h2 class="font-weight-bold">SEDES</h2>
</div>
</div>
<div class="row justify-content-center">
<div class="col-10">
<div class="tabbable-panel">
<div class="tabbable-line">
<ul class="nav nav-tabs nav-fill" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#tab_default_1" data-toggle="tab" role="tab" aria-controls="tab_default_1" aria-selected="true">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab_default_2" data-toggle="tab" role="tab" aria-controls="tab_default_2" aria-selected="false">Tab 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab_default_3" data-toggle="tab" role="tab" aria-controls="tab_default_3" aria-selected="false">Tab 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab_default_4" data-toggle="tab" role="tab" aria-controls="tab_default_4" aria-selected="false">Tab 4</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane show active" id="tab_default_1" role="tabpanel" aria-labelledby="tab_default_1-tab">
<!-- Aqui dentro va el carrusel que desees del tab1 -->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://via.placeholder.com/300?text=Tab1+Canchas" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/300?text=Tab1+Horarios" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/300?text=Tab1+Vestuario" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- fin carrusel tab_1 -->
</div>
<div class="tab-pane" id="tab_default_2" role="tabpanel" aria-labelledby="tab_default_2-tab">
<!-- Aqui dentro va el carrusel que desees del tab2 -->
<div id="carouselExampleIndicators2" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators2" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators2" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators2" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://via.placeholder.com/300?text=Tab2+Canchas" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/300?text=Tab2+Horarios" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/300?text=Tab2+Vestuario" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators2" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators2" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- fin carrusel tab_2 -->
</div>
<div class="tab-pane" id="tab_default_3" role="tabpanel" aria-labelledby="tab_default_3-tab">TRES (Aqui iría el tercer carrusel, creo que ya está claro cómo funcionan)
</div>
<div class="tab-pane" id="tab_default_4" role="tabpanel" aria-labelledby="tab_default_4-tab">CUATRO
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Sedes -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
tabs
? Quieres que cadatab
tenga un slider? – Jheyman Mejia el 20 may. 19 a las 13:16