5.3 KiB
| title | localeTitle |
|---|---|
| Carousel | دائري |
دائري
Carousel عبارة عن مكون عرض شرائح لركوب الدراجات من خلال عناصر مثل الصور أو شرائح النص. يوفر طريقة ديناميكية لتمثيل كمية كبيرة من البيانات (النص أو الصور) عن طريق الانزلاق أو ركوب الدراجات من خلال ، بطريقة سلسة
رمز عينة من شريط التمرير صورة أدناه:
`
<html> <head> </head> </html> `
فهم السمات والفئات المستخدمة في المثال أعلاه:
1) السمات
a) data-ride : - data-ride ="carousel" on page load animation to start.
ب) data-target : - يشير إلى معرف دائري
ج) data-slide-to : - تحدد الشريحة التي تنتقل إليها عند النقر على المؤشرات (نقاط محددة).
2) الفصول
أ) carousel : - class="carousel" يحدد أن div يحتوي على مكتبة دائري.
ب) slide : - تضيف هذه الفئة انتقالات CSS.
c) carousel-inner : - هذا يدل على قسم الكود الذي سيحمل النص / الصورة ليتم عرضها في شرائح.
د) item : - يشير إلى المحتوى المراد عرضه في الرف الدائري.
ه) left carousal-control : - وهذا يضيف الزر الخلفي مما يتيح الانزلاق إلى الشريحة السابقة.
f) right carousal-control : - يضيف هذا الزر التالي الذي يسمح right carousal-control إلى الشريحة التالية.
g) carousel-caption : - يسمح لك هذا الفصل بإضافة تسميات توضيحية إلى كل شريحة.
ملاحظة: أضف class="carousel-caption" لكل عنصر.
استعمال
1) عبر سمات البيانات
يتم استخدام سمة data-ride="carousel" لوضع علامة على شكل دائري كرسوم متحركة بدءًا من تحميل الصفحة. يقبل data-slide الكلمات الرئيسية prev أو next ، والتي تغير موضع الشريحة بالنسبة إلى موقعها الحالي.
2) عبر JavaScript
اتصل بالرسم المتحرك يدويًا باستخدام:
$('.carousel').carousel()
خيارات
يمكن تمرير الخيارات عبر سمات البيانات أو JavaScript. بالنسبة لسمات البيانات ، قم بإلحاق اسم الخيار data- ، كما هو الحال في data-interval="" .
بعض الخيارات المستخدمة بشكل متكرر هي:
- فترة
- وقفة
- اركب
- لف