Отображение индикаторов карусели как базового тега

#angular #bootstrap-4 #carousel

#angular #bootstrap-4 #карусель

Вопрос:

Мои carousel-indicators не отображаются так, как должны, даже если сама карусель есть, я перепробовал много исправлений, но ни одно из них не сработало, вот как они выглядят :

Как вы можете видеть, они не в хорошем положении, и класс style, похоже, не подходит для этого, кто-нибудь знает исправление или что я здесь сделал не так?

Заранее благодарим за вашу помощь

body.component.html

 <div id="myCarousel" class="carousel slide" data-ride="carousel" role="listbox">
  <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>
    <li data-target="#myCarousel" data-slide-to="3"></li>
    <li data-target="#myCarousel" data-slide-to="4"></li>
  </ol>
  <div class="carousel-inner">
    <a class="carousel-item active" href="#one!" ><img src="../../assets/Couv-leaflet-Food-Processing.jpg"></a>
    <a class="carousel-item" href="#two!"><img src="../../assets/Couv-leaflet-In-Plant-Automotive.jpg"></a>
    <a class="carousel-item" href="#three!"><img src="../../assets/Couv-leaflet-DrinkingWateramp;Beverage.jpg"></a>
    <a class="carousel-item" href="#four!"><img src="../../assets/Couv-leaflet-Textile-Machinery.jpg"></a>
    <a class="carousel-item" href="#five!"><img src="../../assets/Couv-leaflet-Industrial-Machinery.jpg"></a>
  </div>
  <a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

index.html

 <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <titledigital leaflets</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<script type="text/javascript">
  $(document).ready(function(){
    $('.carousel').carousel();
  });
  $('.carousel').carousel({
    interval: 2000
  })

</script>
  <app-root></app-root>
</body>
</html>

1. Все работает нормально, пожалуйста, вставьте загрузочный CDN, и ваша проблема решена

2. @NishargShah Когда я добавляю загрузочный CDN, вся карусель исчезает

3. можете ли вы создать его фрагмент?

4. Я думаю, что у меня получилось, похоже, что это был конфликт версий jQuery

5. @NishargShah проблема сохраняется, поэтому я сделал stackblitz, из того, что я вижу, это происходит из carousel-item класса, когда я меняю его на item «работает», вот ссылка, если вы хотите взглянуть stackblitz.com/edit/angular-ivy-9nygdu?file=src/app/body /…

Ответ №1:

Пожалуйста, вставьте загрузочный CDN в свой angular.json , и он будет работать, как ожидалось

 "styles": [
  "styles.css"
],

Ответ №2:

Если вы используете классы boostrap, вам следует добавить эту ссылку в свой <head></head>

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">