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

Question

Я делаю небольшую галерею с использованием карусели, но я хочу, чтобы она была без активного изображения. Это мой код:

<div class="card bg-primary">
<h1 class="text-center bg-secondary text-white py-2">{{placeFromUrl}}</h1>
<div class="card-body">
    <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel" data-interval="2000">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Angular_full_color_logo.svg/250px-Angular_full_color_logo.svg.png" class="d-block w-50 mx-auto">
            </div>
            <div class="carousel-item" *ngFor="let image of placeImages">
                <img src="data:image/jpeg;base64,{{image.bytes}}" class="d-block w-50 mx-auto">
            </div>
        </div>
    </div>      
</div>    
</div>

Answer 1

Вы можете иметь его без активного элемента, но он ничего не отобразит. Смысл активного класса в том, чтобы установить display: block; По умолчанию карусель-элемент имеет отображение: нет. Добавляя активный класс, вы перезаписываете это свойство для отображения этого изображения. У вас есть еще много работы, чтобы сделать это, например, добавление кнопок или таймера для поворота ваших предметов и изменение класса на активный.

Поскольку вы используете Angular, я бы порекомендовал посмотреть на ngb -carousel. Это примерно так.

<ngb-carousel class="mt-3 bg-dark">
  <ng-template ngbSlide *ngFor="let image of repo.currentPlace.images">
    <div class="picsum-img-wrapper">
      <img style="display: block;" [src]="image.url" alt="Random first slide" [class]="getRotateClass(image)">
    </div>
    <div class="carousel-caption">
      <p>{{image.caption}}</p>
    </div>
  </ng-template>
</ngb-carousel>

ngb-карусель является частью пакета ng- bootstrap. Для установки пакета выполните следующую команду в каталоге проекта:

npm install --save @ng-bootstrap/ng-bootstrap

Затем добавьте NgbModule в свой модуль приложения.

imports: [NgbModule, ...],

Инструкции по полной установке и использованию вместе с примерами полного кода приведены здесь. : https://ng-bootstrap.github.io/# / Начало работы