здесь моя проблема в том, что я не могу установить загрузочные карты на одинаковую высоту, и то, что происходит в моем коде, это когда я пытаюсь нажать prev, затем, когда карусельная карта идет вверх или вниз, вы можете проверить мой стек блиц-файл.
требование: Все карты должны быть одинакового размера
<div class="container">
<div class="row">
<div class="col-md-12" id="datacases">
<h2 class="info-datacases-h2">datacases</h2>
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-md-4">
<div class="card info-datacases-card ">
<img class="card-img-top img-fluid"src="https://via.placeholder.com/300.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title info-datacases-h5 pl-5">slide 1 </h5>
<p class="card-text info-datacases-p text-justify">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<br>
<div align="left" class="pl-0">
<span class="badge badge-data"> sample data</span>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card info-datacases-card " >
<img class="card-img-top img-fluid" src="https://via.placeholder.com/300.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title info-datacases-h5 pl-3">Slide 2</h5>
<p class="card-text info-datacases-p text-justify">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>
<div align="left" class="pt-3">
<span class="badge badge-data"> slide 2data</span>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card info-datacases-card ">
<img class="card-img-top img-fluid" src="https://via.placeholder.com/300.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title info-datacases-h5 pl-5">Slide 3</h5>
<p class="card-text info-datacases-p text-justify" style="word-spacing: -1.5px">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
</p>
<div align="left" style="padding: 12px">
<span class="badge badge-data">Slide 3 data</span>
</div>
<p class="cmng" style="text-align:center;background-color: #e5f4f4">data comming soon</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-md-4">
<div class="card info-datacases-card ">
<img class="card-img-top img-fluid" src="https://via.placeholder.com/300.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title info-datacases-h5 pl-3">Slide 4</h5>
<p class="card-text info-datacases-p text-justify">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>
<div align="left" style="padding: 12px">
<span class="badge badge-data">Slide 4 data</span>
<span class="badge badge-data">Slide 4 info</span>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card info-datacases-card ">
<img class="card-img-top img-fluid" src="https://via.placeholder.com/300.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title info-datacases-h5" style="padding-left: 6rem">Slide 5</h5>
<p class="card-text info-datacases-p text-justify">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
</p>
<div align="left" >
<span class="badge badge-data" >Slide 5 data</span>
<span class="badge badge-data" style="padding-right: 2px">Slide 5 info</span>
</div>
<br>
<p class="cmng" style="text-align: center;background-color: #e5f4f4">data coming soon</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card info-datacases-card ">
<img class="card-img-top img-fluid" src="https://via.placeholder.com/300.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title info-datacases-h5" style="padding-left: 6rem">Slide 6</h5>
<p class="card-text info-datacases-p text-justify" style="word-spacing: -1.5px">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>
<div align="left" style="padding: 12px">
<span class="badge badge-data">Slide 6 data</span>
</div>
<br>
<p class="cmng" style="text-align: center;background-color: #e5f4f4">data info coming soon</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-md-4">
<div class="card info-datacases-card ">
<img class="card-img-top img-fluid" src="https://via.placeholder.com/300.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title info-datacases-h5" style="padding-left: 6rem">Slide 7</h5>
<p class="card-text info-datacases-p text-justify" style="word-spacing: -1.5px">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<div align="left" style="padding: 12px">
<span class="badge badge-data">Slide 7 data</span>
</div>
<p class="cmng" style="text-align:center;background-color: #e5f4f4"> data information coming soon</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card info-datacases-card ">
<img class="card-img-top img-fluid" src="https://via.placeholder.com/300.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title info-datacases-h5" style="padding-left: 6rem">Slide 8</h5>
<p class="card-text info-datacases-p text-justify" style="word-spacing: -1.5px">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>
<div align="left" style="padding: 12px">
<span class="badge badge-data">slide 8 info</span>
</div>
<p class="cmng" style="text-align: center;background-color: #e5f4f4">data coming soon</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card info-datacases-card ">
<img class="card-img-top img-fluid" src="https://via.placeholder.com/300.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title info-datacases-h5" style="padding-left: 6rem">Slide 9</h5>
<p class="card-text info-datacases-p text-justify" style="word-spacing: -1.5px">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<div align="left" style="padding: 12px">
<span class="badge badge-data">Slide 9 data</span>
</div>
<p class="cmng" style="text-align: center;background-color: #e5f4f4">data coming soon</p>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></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>
</div>
</div>
</div>
</div>
URL стека: https://stackblitz.com/edit/angular-ckukyq