انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 27
دورة Bootstrap

Bootstrap 4 Carousel

ستتعلم في هذا الدرس كيفة عمل عارض للصور متحرك باستخدام ال Bootstrap 

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
3
الأمثلة
11
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
3,225
محتوى الدرس
في هذا الدرس 3تصفّح المواضيع

Bootstrap 4 Carousel

ال Carousel هو معرض صور متحرك يمكنك بناءه بال Bootstrap بسهولة

Result


HTML 
<!-- 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

HTML 
.carousel

Adds indicators for the carousel

HTML 
.carousel-indicators

Adds slides to the carousel

HTML 
.carousel-inner

Specifies the content of each slide

HTML 
.carousel-item

Adds a left (previous) button to the carousel

HTML 
.carousel-control-prev

Adds a right(next) button to the carousel

HTML 
.carousel-control-next

Used with .carousel-control-*

HTML 
.carousel-control-prev-icon

Used with .carousel-control-*

HTML 
.carousel-control-next-icon

Adds a CSS transition and animation effect

HTML 
.slide

Add Captions to Slides

قم باضافة div متبوعاً ب carousel-item class class بداخله div متبوعاً ب carousel-caption class بداخل ال carousel

HTML 
<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>
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…