406
یکی دو تا از پروژه های carousel را از اینترنت پیدا کردم و به طور معمول من carousel را در یک viewComponent میگذارم، خوب هرچند مهم بود اما هیچ حرکتی از carousel در صفحه وب نمیدیدم من هم پروژه را تمام کردم و خواستم که ان را فعال کنم
بعد از دیدن جزئیات کد اشکال دراین بود که در bootstrap 5 باید از bs به جای mdb استفاده میکردم تا جایی یادم هست mdb برای material design استفاده میشد و من هم با یک replace ساده data-mdb را به data-bs تغییر دادم
<!-- Carousel wrapper -->
<div id="carouselBasicExample" class="carousel slide carousel-fade" data-bs-ride="carousel">
<!-- Indicators -->
<div class="carousel-indicators">
<button
type="button"
data-bs-target="#carouselBasicExample"
data-bs-slide-to="0"
class="active"
aria-current="true"
aria-label="Slide 1"
></button>
<button
type="button"
data-bs-target="#carouselBasicExample"
data-bs-slide-to="1"
aria-label="Slide 2"
></button>
<button
type="button"
data-bs-target="#carouselBasicExample"
data-bs-slide-to="2"
aria-label="Slide 3"
></button>
</div>
<!-- Inner -->
<div class="carousel-inner">
<!-- Single item -->
<div class="carousel-item active">
<img src="~/img/main-pari.jpg" class="d-block w-100" alt=""/>
<div class="carousel-caption d-none d-md-block">
@* <h5>پاریز شهر جهانی نسترن</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>*@
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(22).webp" class="d-block w-100" alt="Canyon at Nigh"/>
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(23).webp" class="d-block w-100" alt="Cliff Above a Stormy Sea"/>
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<!-- Inner -->
<!-- Controls -->
<button class="carousel-control-prev" type="button" data-bs-target="#carouselBasicExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselBasicExample" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- Carousel wrapper -->