Как мне заставить эту загрузочную карусель работать - PullRequest
Новая
       10

Как мне заставить эту загрузочную карусель работать

0 голосов
/ 18 апреля 2019

При попытке добавить загрузочную карусель на мой сайт для отображения изображений отображаются первые изображения, однако кнопки для изменения изображения не работают

Я попытался добавить немного JavaScript, но, похоже, ничего не работает.]

В целом я чувствую, что это где-то глупая ошибка, но я, честно говоря, не уверен и не знаю, что еще делать 

        <div class="row">

            <div class="col-sm-4">

                <div class="midcol">

                <h2>Some of our current stock</h2>

                <div id="myCarousel" class="carousel slide" data-ride="carousel">

                    <!-- Indicators -->

                    <ol class="carousel-indicators">

                      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>

                      <li data-target="#myCarousel" data-slide-to="1"></li>

                      <li data-target="#myCarousel" data-slide-to="2"></li>

                    </ol>

                    <div class="carousel-inner" role="listbox">

                      <div class="item active">

                        <img class="first-slide" src="@routes.Assets.versioned("images/1.jpeg")" alt="First slide">

                        <div class="container">

                          <div class="carousel-caption">

                            <p>Volkswagen Polo 2012</p>

                          </div>

                        </div>

                      </div>

                      <div class="item">

                        <img class="second-slide" src="@routes.Assets.versioned("images/2.jpeg")" alt="Second slide">

                        <div class="container">

                          <div class="carousel-caption">

                            <p>Opel Corsa 2010</p>

                          </div>

                        </div>

                      </div>

                      <div class="item">

                        <img class="third-slide" src="@routes.Assets.versioned("images/3.jpeg")" alt="Third slide">

                        <div class="container">

                          <div class="carousel-caption">

                            <p>Renautl Clio 2014</p>

                          </div>

                        </div>

                      </div>

                    </div>

                    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">

                      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

                      <span class="sr-only">Previous</span>

                    </a>

                    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">

                      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

                      <span class="sr-only">Next</span>

                    </a>

                  </div><!-- /.carousel -->

            </div>

        </div>

Ответы [ 2 ]

0 голосов
/ 18 апреля 2019

когда вы используете загрузочную карусель, вам нужно использовать carousel-item использование предмет класс

просто используйте карусель - прежде чем ваш предмет надеется, что он решит вашу проблему

0 голосов
/ 18 апреля 2019

Я думаю, что вы должны использовать такой элемент 

                  <div class="carousel-item active">
                    <img class="d-block w-100"  src="@routes.Assets.versioned("images/1.jpeg")" alt="First slide">

                      <div class="carousel-caption d-md-block">

                        <p>Volkswagen Polo 2012</p>

                      </div>

                  </div>

, а также вы должны использовать код jquery 

$('.carousel').carousel({
   interval: 6000,
   pause: "false"
});
...