Карусель Bootstrap падает после второго открытия модала, в котором она находится - PullRequest
Новая
       12

Карусель Bootstrap падает после второго открытия модала, в котором она находится

0 голосов
/ 17 марта 2019

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

Я пытаюсь создать галерею своих проектов, и когда я нажимаюна одном вы видите карусель с фотографиями из проекта и краткое введение.Проект выполнен с Angular. 

@Component({
  selector: "app-tester",
  templateUrl: "./tester.component.html",
  styleUrls: ["./tester.component.scss"]
})
export class TesterComponent implements OnInit {
  selection = 0;
  items = [
    {
      title: "Personal Website",
      tags: "#HTML5 #CSS3 #Angular #Javascript",
      content:
        "Lore Ipsume Lore Ipsume Lore Ipsume Lore Ipsume Lore Ipsume Lore Ipsume Lore Ipsume",
      github:
        "https://github.com/PatrickHallek?tab=repositories/PersonalWebsite",
      preview:
        "https://images.unsplash.com/photo-1453928582365-b6ad33cbcf64?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1352&q=80",
      src: [
        "assets/Images/project/gif-calendar/login.png",
        "assets/Images/project/gif-calendar/full.png",
        "assets/Images/project/gif-calendar/edit.png",
        "assets/Images/project/gif-calendar/link.png"
      ]
    }
  ];

  constructor() {}

  selectionPicker(i) {
    this.selection = i;
  }

  ngOnInit() {}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<!-- Galery -->
<div class="content">
  <div class="gallery">
    <div *ngFor="let item of items; index as i" class="image">
      <img class="d-block" [src]="item.preview" alt="First slide">
      <div class="overlay">

      </div>
      <div class="inner-overlay">
        <div class="overlay-footer">
          <h4>{{item.tags}}</h4>
        </div>
        <i (click)="selectionPicker(i)" data-toggle="modal" data-target="#image1" class="far fa-images"></i>
        <a *ngIf="item.github" [href]="item.github" target="_blank"><i class="fab fa-github"></i></a>
      </div>
      <div class="image-title">
        <h2>
          <div class="image-title-positioner">{{item.title}}</div>
        </h2>
      </div>
    </div>
  </div>
</div>

<!-- Modal -->
<div class="modal" id="image1">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title" id="exampleModalLongTitle">{{items[selection].title}}</h1>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span style="font-size: 30px; outline: none; border: none; color:white;" aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
          <div *ngIf="items[selection].src" class="carousel-inner">
            <div class="carousel-item active">
              <div class="card-body">
                <h3>
                  {{items[selection].title}}
                  {{items[selection].content}}
                </h3>
              </div>
            </div>
            <div *ngFor="let src of items[selection].src; index as i" class="carousel-item">
              <img class="d-block w-100" [src]="items[selection].src[i]">
            </div>
            <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
...