Bootstrap

Bootstrap 4 Carousel

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

التاريخ

06 ديسمبر 2021

الدروس

34

المستوى

العامة

اللغة

انجليزي

المشاهدات

1383

المواضيع

6
الشروحات chevron_left Bootstrap 4 Carousel chevron_left Bootstrap

Bootstrap 4 Carousel

مراجعة تقنية
Mostafa Hefny

Mostafa Hefny

CEO & Founder CloseTag

</> 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>
معلومات تهمك
  • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات