Mean Stack: Bootstrap Carousel не работает под углом 7

Question

Я создаю стековое приложение MEAN, используя угловой 7. Для home page я использовал Bootstrap Carousel , чтобы сделать привлекательную страницу, но она не работает.

Вот кодhtml file

<div class="carousel slide" id="slider" data-ride="carousel">
        <!--indicators-->
        <ol class="carousel-indicators">
            <li data-target="#slider" data-slide-to="0" class="active"></li>
            <li data-target="#slider" data-slide-to="1"></li>
            <li data-target="#slider" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="item active">
                <img src="../../assets/public/RoadTipsMain.jpg" style="width: 100%">
                <div class="carousel-caption">
                    <h4>Welcome</h4>
                    <p>Travel! Enjoy!</p>
                </div>
            </div>
            
            <div class="item" id="slide2">
                <img src="../../assets/public/5.jpg" style="width: 100%">
                <div class="carousel-caption">
                    <h4>Welcome</h4>
                    <p>Travel! Enjoy!</p>
                </div>
            </div>
            
            <div class="item" id="slide3">
                <img src="../../assets/public/cardrive.jpg" style="width: 100%">
                <div class="carousel-caption">
                    <h4>Welcome</h4>
                    <p>Travel! Enjoy!</p>
                </div>
            </div>

        </div>
        <a class="left carousel-control" href="#slider" data-slide="prev" role="button"><span class="icon-prev"></span></a>
        <a class="right carousel-control" href="#slider" data-slide="next" role="button"><span class="icon-next"></span></a>
    </div>

css file

#slider .item {
    height: 500px;
}
.carousel-caption {
    font-size: 18px;    
}

Есть ли какая-либо ошибка, которую я делаю с кодом?Я думаю #slider не работает в угловых 7. Пожалуйста, помогите.

Answer 1

Как я уже объяснил здесь (помечено как дубликат, но ничего не произошло):

Вы должны отдать все предметов (фотографии) каруселикласс carousel-item, но вы дали им только класс item.То же самое с кнопками Previous и Next .Классы должны быть carousel-control-prev и carousel-control-next, но вы дали им только класс carousel-control.

Все остальное работает нормально!При работе с Bootstrap вы всегда должны обращать внимание на классы, поскольку они должны быть абсолютно правильными, чтобы он вообще работал.(Вы также можете удалить popper.js -скрипт внизу, так как он вообще не используется.)

Поэтому просто измените все <div class="item"> на <div class="carousel-item"> и добавьте -nextи -prev для контрольных классов, как я сделал здесь:

#slider .carousel-item {
  height: 500px;
}

.carousel-caption {
  font-size: 18px;
}

.carousel-item>img {
  width: 100%
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!--all above is necessary for bootstrap to function in this snippet-->



<div class="carousel slide" id="slider" data-ride="carousel">
  <!--indicators-->
  <ol class="carousel-indicators">
    <li data-target="#slider" data-slide-to="0" class="active"></li>
    <li data-target="#slider" data-slide-to="1"></li>
    <li data-target="#slider" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="http://lorempixel.com/g/1000/600/">
      <div class="carousel-caption">
        <h4>Welcome</h4>
        <p>Travel! Enjoy!</p>
      </div>
    </div>

    <div class="carousel-item" id="slide2">
      <img src="http://lorempixel.com/g/1000/600/">
      <div class="carousel-caption">
        <h4>Welcome</h4>
        <p>Travel! Enjoy!</p>
      </div>
    </div>

    <div class="carousel-item" id="slide3">
      <img src="http://lorempixel.com/g/1000/600/">
      <div class="carousel-caption">
        <h4>Welcome</h4>
        <p>Travel! Enjoy!</p>
      </div>
    </div>

  </div>
  <a class="carousel-control-prev" href="#slider" 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="#slider" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>