Bootstrap هو إطار أمامي للتطوير السريع لتطبيقات الويب ومواقع الويب. يعتمد Bootstrap على HTML و CSS و JavaScript.
قضية
فيما يلي علبة دائرية مصنوعة من هذا المكون الإضافي والمكونات ذات الصلة.
<div id = "carousel-example-generic" dative = "carousel"> <!-مؤشرات-> <ol> <li-target = "#carousel-example-generic" data-slide-to- "0"> </li> <li data-target = "#carousel-example-generic-generic" data-target = "#carousel-example-generic" data-slide-to = "2"> </li> </ol> <!-Wrapper for Slides-> <viv> <viv> <img src = "..."> <viv> ... </viv> </viv> ... </viv> <!-Controls-> <a href = " data-slide = "prev"> <span> </span> </a> <a href = "#carousel-example-generic" data-slide = "next"> </span> </a> </viv>
لا يدعم Internet Explorer 8 و 9 تأثيرات الرسوم المتحركة الانتقالية
يقوم Bootstrap بتنفيذ تأثيرات الرسوم المتحركة على أساس CSS3 ، لكن Internet Explorer 8 و 9 لا يدعم خصائص CSS الضرورية هذه. لذلك ، سيتم فقدان تأثيرات الرسوم المتحركة الانتقالية عند استخدام كلا المتصفحين. علاوة على ذلك ، لا نعتزم استخدام تنفيذ وظائف بديلة قائمة على jQuery.
خيارات اختيارية
في أي .Item ، يمكنك إضافة. -carousel-caption إلى كل شريحة. يمكنك أيضًا إضافة أي رمز HTML ، والذي سيتم ترتيبه وتنسيقه تلقائيًا.
900x500
<viv> <img src = "..."> <viv> <h3> ... </h3> <p> ... </p> </viv> </viv>
قضايا الوصول
مكون الكاروسيل غير متوافق مع معايير إمكانية الوصول. إذا كان التوافق مطلوبًا ، ففكر في خيارات أخرى لتقديم الشرائح.
الاستخدام
من خلال سمة البيانات
يمكن أن تتحكم سمة البيانات بسهولة في وضع الكاروسيل. يمكن أن تقبل انقطاع البيانات الكلمات الرئيسية السابقة أو التالية التي تتحكم في موضع التشغيل. بالإضافة إلى ذلك ، يمكن أيضًا تمرير مجموعة الشريحة التي تبدأ بـ 0 من خلال انقطاع البيانات إلى.
يتم استخدام سمة Data Ride = "carousel" لتمييز مكون carousel الذي يبدأ بعد تحميل الصفحة.
عبر JavaScript
بدء مكون carousel يدويًا:
نسخة الكود كما يلي:
$ ('. carousel'). carousel ()
خيارات
يمكن تمرير الخيارات من خلال خصائص البيانات أو JavaScript. بالنسبة لسمات البيانات ، تحتاج إلى وضع اسم الخيار بعد البيانات ، على سبيل المثال البيانات الفاصلة = "".
تصف القيمة الافتراضية نوع الاسم وقت الانتظار لرقم الفاصل 5000 دوران الشريحة. إذا كان خطأ ، فلن يبدأ carousel الحلقة تلقائيًا. توقف مؤقت "تحوم" الماوس يبقى في منطقة الشريحة ويتوقف مؤقتًا عن الكاروسيل ، ويترك الماوسار. التفاف Boolean صحيح ما إذا كان الكاروسيل لا يزال يحلق.
طريقة
.Carousel (خيارات)
تهيئة مكون carousel ، وقبول معلمة خيار نوع الكائن اختياري ، وابدأ حلقة الشريحة.
$ ('. carousel'). carousel ({steral: 2000}).دورة كل إطار من اليسار إلى اليمين.
.Carousel ("مؤقت")
توقف عن الكاروسيل.
. كاروسيل (رقم)
ضع الكاروسيل إلى الإطار المحدد (يبدأ تراكب الإطار بـ 0 ، على غرار صفيف).
. كاروسيل ("السابق")
العودة إلى الإطار السابق.
.Carousel ('التالي')
انتقل إلى الإطار التالي.
حدث
يعرض مكون Bootstrap Carousel حدثين للاستماع.
| نوع الحدث | يصف |
|---|---|
| slide.bs.carousel | يبدأ هذا الحدث مباشرة بعد استدعاء طريقة slide . |
| Slid.BS.Carousel | يتم تشغيله عندما يتم لعب جميع عروض الشرائح. |
$ ('#mycarousel'). on ('slide.bs.carousel' ، function () {// افعل شيئًا ...ما سبق هو التفسير التفصيلي لحالة تأثير carousel bootstrap استنادًا إلى المكونات الإضافية JS التي قدمها المحرر. أتمنى أن تساعدك!