Карусель Bootstrap 4 в базовом проекте Angular 8 Asp.net не меняет изображения автоматически - PullRequest
0 голосов
/ 28 июня 2019

Я следую этому примеру и создал эту карусель. https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_carousel Карусель не переключает изображения. Так сказать, иногда я нажимаю на стрелку, затем она начинает повторяться, но в других случаях даже не начинается. работает только вручную. Я добавил data-interval = "2000", но это не помогло. пожалуйста, руководство

<div class="container">
        <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <div id="demo" class="carousel slide" data-interval="2000" data-ride="carousel">

                        <!-- Indicators -->
                        <ul class="carousel-indicators">
                            <li data-target="#demo" data-slide-to="0" class="active"></li>
                            <li data-target="#demo" data-slide-to="1"></li>
                            <li data-target="#demo" data-slide-to="2"></li>
                        </ul>

                        <!-- The slideshow -->
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <img src="assets/Desert.jpg" width="1100" height="500">
                            </div>
                            <div class="carousel-item">
                                <img src="assets/Jellyfish.jpg" width="1100" height="500">
                            </div>
                            <div class="carousel-item">
                                <img src="assets/Lighthouse.jpg" width="1100" height="500">
                            </div>
                        </div>

                        <!-- Left and right controls -->
                        <a class="carousel-control-prev" href="#demo" data-slide="prev">
                            <span class="carousel-control-prev-icon"></span>
                        </a>
                        <a class="carousel-control-next" href="#demo" data-slide="next">
                            <span class="carousel-control-next-icon"></span>
                        </a>
                    </div>
                </div>
            </div>
</div>

Кроме того, добавлены эти ссылки в index.html и файл index.cshtml в разделе head в .Net

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

1 Ответ

0 голосов
/ 28 июня 2019

Вам нужно установить интервал для карусели по javascript как

$(document).ready(function(){
  $('#demo').carousel({
    interval: 2000,
     cycle: true
  });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...