Bootstrap 4 Carousel
ستتعلم في هذا الدرس كيفة عمل عارض للصور متحرك باستخدام ال Bootstrap
التاريخ
06 ديسمبر 2021
الدروس
34
المستوى
العامة
اللغة
انجليزي
المشاهدات
1383
المواضيع
6
Bootstrap 4 Carousel
</> Bootstrap 4 Carousel
ال Carousel هو معرض صور متحرك يمكنك بناءه بال Bootstrap بسهولة
Result
يظهر الكود بهذا الشكل على المتصفح
<!-- Indicators --> <div class="carousel-indicators"> <li data-target="#demo" data-slide-to="0" class="active"></li> <li data-target="#demo" data-slide-to="1"></li> <li data-target="#demo" data-slide-to="2"></li> </div>
</> Carousel Classes
Creates a carousel
.carousel
Adds indicators for the carousel
.carousel-indicators
Adds slides to the carousel
.carousel-inner
Specifies the content of each slide
.carousel-item
Adds a left (previous) button to the carousel
.carousel-control-prev
Adds a right(next) button to the carousel
.carousel-control-next
Used with .carousel-control-*
.carousel-control-prev-icon
Used with .carousel-control-*
.carousel-control-next-icon
Adds a CSS transition and animation effect
.slide
</> Add Captions to Slides
قم باضافة div متبوعاً ب carousel-item class class بداخله div متبوعاً ب carousel-caption class بداخل ال carousel
<div class="carousel-item"> <img src="la.jpg" alt="Los Angeles"> <div class="carousel-caption"> <h3>Los Angeles</h3> <p>We had such a great time in egypt!</p> </div> </div>