Бутстрап, карусель, кнопка шеврона и слайды не работают - PullRequest
Новая
       12

Бутстрап, карусель, кнопка шеврона и слайды не работают

0 голосов
/ 24 октября 2018

Ниже я вставил свой код для загрузочной карусели.Это не работает, но я не уверен почему. 

  <div id="carouseldiv" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#carouseldiv" data-slide-to="0" class="active"></li>
                    <li data-target="#carouseldiv" data-slide-to="1"></li>
                    <li data-target="#carouseldiv" data-slide-to="2"></li>
                    <li data-target="#carouseldiv" data-slide-to="3"></li>
                    <li data-target="#carouseldiv" data-slide-to="4"></li>
                    <li data-target="#carouseldiv" data-slide-to="5"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="img/1.jpg" alt="1">
                        <div class="carousel-caption">
                            <p>PUBG : King of all games</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="img/2.jpg" alt="1">
                        <div class="carousel-caption">
                            <p>PUBG : King of all games</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="img/3.jpg" alt="1">
                        <div class="carousel-caption">
                            <p>PUBG : King of all games</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="img/4.jpg" alt="1">
                        <div class="carousel-caption">
                            <p>PUBG : King of all games</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="img/5.jpg" alt="1">
                        <div class="carousel-caption">
                            <p>PUBG : King of all games</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="img/6.jpg" alt="1">
                        <div class="carousel-caption">
                            <p>PUBG : King of all games</p>
                        </div>
                    </div>
                </div>
                <a class="left carousel-control" href="#carouseldiv" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#carouseldiv" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>

1 Ответ

0 голосов
/ 24 октября 2018

Я сравнил ваш фрагмент кода с фрагментом на веб-сайте начальной загрузки .

Похоже, вы не используете классы элементов div и span, которые нужны Bootstrap.

Например, у вас есть <div class="item">, когда документация Boostrap показывает <div class="carousel-item">.Я также заметил, что вы используете глификон-шеврон, когда вы должны использовать <span class="carousel-control-prev-icon" aria-hidden="true"></span> и <span class="carousel-control-next-icon" aria-hidden="true"></span>.

По сути, после проверки правильности импорта Bootstrap вам нужно будет пройти через фрагмент кода документации Bootstrap.и ваш собственный построчно, чтобы убедиться, что используемые CSS-классы одинаковы.Возможно, вам будет полезно начать с карусели с 2 слайдами, а не с каруселью с 6 слайдами.

Вы не опубликовали, какую версию Bootstrap вы используете, поэтому я предположил версию 4.1 (последняя стабильная версия, как я пишу это).

...