Bootstrap 4 Carousel
ستتعلم في هذا الدرس كيفة عمل عارض للصور متحرك باستخدام ال Bootstrap
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
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>
CLOSETAG