При попытке вставить слайдер в tab's (на каждой вкладке должно быть по 1 слайдеру) слайдеры начинают багаться при переключении вкладок. При переходе с 1 на вторую - всё ок, при переходе обратно на первую вкладку появляется пустое пространство на месте слайдера, а он опускается ниже. При клике на третью вкладку (она пока пустая) и переходе с неё на любую другую - слайдеры вообще не отображаются.
Версия бутстрапа : 4.0.0 beta3
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab"> <h5 class="my-0 text-center">Основа</h5>
<div class="spacer-builder" ></div>
<div id="carouselExampleIndicators1" class="carousel slide" data-ride="carousel">
<div class="roller carousel-inner">
<div class="carousel-item active">
<div class=" row">
<div class="row text-center" style="margin-left: 20%">
<div class=" col-3 px-2 my-2"><img src="/content/builder/kamni/forest brown.png" width = "64px" data-kamen="forest brown.png" alt="" class="w-100 osnova"></div>
<div class=" col-3 px-2 my-2"><img src="/content/builder/kamni/Nero Marquina.png" width = "64px" data-kamen="Nero Marquina.png" alt="" class="w-100 osnova"></div>
<div class=" col-3 px-2 my-2"><img src="/content/builder/kamni/Rojo Alicante.png" width = "64px" data-kamen="Rojo Alicante.png" alt="" class="w-100 osnova"></div>
<div class=" col-3 px-2 my-2"><img src="/content/builder/kamni/emperador light.png" width = "64px" data-kamen="emperador light.png" alt="" class="w-100 osnova"></div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="row text-center" style="margin-left: 20%">
<div class="col-3 px-2 my-2"><img src="/content/builder/kamni/Biancone.png" width = "64px" data-kamen="Biancone.png" alt="" class="w-100 osnova" data-selected="true"></div>
<div class="col-3 px-2 my-2"><img src="/content/builder/kamni/Black and Gold.png" width = "64px" data-kamen="Black and Gold.png" alt="" class="w-100 osnova"></div>
<div class="col-3 px-2 my-2"><img src="/content/builder/kamni/Breccia Sardo.png" width = "64px" data-kamen="Breccia Sardo.png" alt="" class="w-100 osnova"></div>
<div class="col-3 px-2 my-2"><img src="/content/builder/kamni/Verde Guatemala.png" width = "64px" data-kamen="Verde Guatemala.png" alt="" class="w-100 osnova"></div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="row text-center" style="margin-left: 20%">
<div class="col-6 px-2 my-2"><img src="/content/builder/kamni/Crema Marfil.png" width = "64px" data-kamen="Crema Marfil.png" alt="" class="w-100 osnova"></div>
<div class="col-6 px-2 my-2"><img src="/content/builder/kamni/Emperador Dark.png" width = "64px" data-kamen="Emperador Dark.png" alt="" class="w-100 osnova"></div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators1" 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="#carouselExampleIndicators1" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div></div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab"> <h5 class="my-0 text-center">Основа</h5>
<div class="spacer-builder" ></div>
<div id="carouselExampleIndicators2" class="carousel slide" data-ride="carousel">
<div class="roller carousel-inner">
<div class="carousel-item active">
<div class=" row">
<div class="row text-center" style="margin-left: 20%">
<div class=" col-3 px-2 my-2"><img src="/content/builder/kamni/forest brown.png" width = "64px" data-kamen="forest brown.png" alt="" class="w-100 osnova"></div>
<div class=" col-3 px-2 my-2"><img src="/content/builder/kamni/Nero Marquina.png" width = "64px" data-kamen="Nero Marquina.png" alt="" class="w-100 osnova"></div>
<div class=" col-3 px-2 my-2"><img src="/content/builder/kamni/Rojo Alicante.png" width = "64px" data-kamen="Rojo Alicante.png" alt="" class="w-100 osnova"></div>
<div class=" col-3 px-2 my-2"><img src="/content/builder/kamni/emperador light.png" width = "64px" data-kamen="emperador light.png" alt="" class="w-100 osnova"></div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="row text-center" style="margin-left: 20%">
<div class="col-3 px-2 my-2"><img src="/content/builder/kamni/Biancone.png" width = "64px" data-kamen="Biancone.png" alt="" class="w-100 osnova" data-selected="true"></div>
<div class="col-3 px-2 my-2"><img src="/content/builder/kamni/Black and Gold.png" width = "64px" data-kamen="Black and Gold.png" alt="" class="w-100 osnova"></div>
<div class="col-3 px-2 my-2"><img src="/content/builder/kamni/Breccia Sardo.png" width = "64px" data-kamen="Breccia Sardo.png" alt="" class="w-100 osnova"></div>
<div class="col-3 px-2 my-2"><img src="/content/builder/kamni/Verde Guatemala.png" width = "64px" data-kamen="Verde Guatemala.png" alt="" class="w-100 osnova"></div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="row text-center" style="margin-left: 20%">
<div class="col-6 px-2 my-2"><img src="/content/builder/kamni/Crema Marfil.png" width = "64px" data-kamen="Crema Marfil.png" alt="" class="w-100 osnova"></div>
<div class="col-6 px-2 my-2"><img src="/content/builder/kamni/Emperador Dark.png" width = "64px" data-kamen="Emperador Dark.png" alt="" class="w-100 osnova"></div>
</div>
</div>
</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></div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>