0

При попытке вставить слайдер в 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>

1 ответ 1

0

Проблема решена. Перестал использовать CDN и подключил последнюю версию бутстрапа напрямую.

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.