تتعلم هذه المقالة بشكل أساسي المكون الإضافي JavaScript - Carousel. دون مزيد من اللغط ، فقط اذهب للدراسة. يمكن مشاهدة البرنامج التعليمي الكامل: Bootstrap 3.0 البرنامج التعليمي
كاروسيل
فيما يلي علبة دائرية مصنوعة من هذا المكون الإضافي والمكونات ذات الصلة.
<Body> <div id = "carousel-example-generic" data = "carousel"> <!-مؤشرات-> <ol> <li target = "#carousel-example-generic" data-to-to = "0"> </li> <li data-target = "#carousel-example-generic" data-target = "#carousel-example-generic" data-slide-to = "2"> </li> </ol> <!-Wrapper for Slides-> <div style = "text-align: center"> <viv> <img>/img> </viv> <iv> href = "#carousel-example-generic" data-slide = "prev"> <span> </span> </a> <a href = "#carousel-example-generic" data-slide = "next"> </span> </a> </viv> <script src = src = "js/bootstrap.min.js"> </script> <script type = "text/javaScript"> // $ ('لا يدعم Internet Explorer 8 و 9 تأثيرات الرسوم المتحركة الانتقالية
يقوم Bootstrap بتنفيذ تأثيرات الرسوم المتحركة على أساس CSS3 ، لكن Internet Explorer 8 و 9 لا يدعم خصائص CSS الضرورية هذه. لذلك ، سيتم فقدان تأثيرات الرسوم المتحركة الانتقالية عند استخدام كلا المتصفحين. علاوة على ذلك ، لا تعتزم Bootstrap استخدام وظائف بديلة قائمة على jQuery.
خيارات اختيارية
في أي .Item ، يمكنك إضافة. -carousel-caption إلى كل شريحة. يمكنك أيضًا إضافة أي رمز HTML ، والذي سيتم ترتيبه وتنسيقه تلقائيًا.
<viv> <img>/img> <viv> <h4> أول علامة تصوير مصغرة </h4> <p> Cras Justo Odio ، dapibus ac facilisis in ، egestas eget quam. Donec ID ELIT NON MI Porta Gravida في Eget Metus. nullam id dolor id nibh intristies elet eLit eLit eLit
أضف ثلاثة عناصر ، ثم سيتم تصنيف التأثير.
قضايا الوصول
مكون الكاروسيل غير متوافق مع معايير إمكانية الوصول. إذا كان التوافق مطلوبًا ، ففكر في خيارات أخرى لتقديم الشرائح.
الاستخدام من خلال سمة البيانات
يمكن أن تتحكم سمة البيانات بسهولة في وضع الكاروسيل. يمكن أن تقبل انقطاع البيانات الكلمات الرئيسية السابقة أو التالية التي تتحكم في موضع التشغيل. بالإضافة إلى ذلك ، يمكن أيضًا تمرير مجموعة الشريحة التي تبدأ بـ 0 من خلال انقطاع البيانات إلى.
يتم استخدام سمة Data Ride = "carousel" لتمييز مكون carousel الذي يبدأ بعد تحميل الصفحة.
أضفه في حاوية الكاروسيل الخارجية
<div id = "carousel-example-generic" data Ride = "Carousel">
عبر JavaScript
ابدأ يدويًا مكون carousel (أعلاه نقوم تلقائيًا بتشغيل مكون carousel باستخدام خاصية Ride Data.):
$ ('. carousel'). carousel ()
خيارات
يمكن تمرير الخيارات من خلال خصائص البيانات أو JavaScript. بالنسبة لسمات البيانات ، تحتاج إلى وضع اسم الخيار بعد البيانات ، على سبيل المثال البيانات الفاصلة = "".
طريقة
$ (""). carousel (خيارات)
تهيئة مكون carousel ، وقبول معلمة خيار نوع الكائن اختياري ، وابدأ حلقة الشريحة.
$ ('. carousel'). carousel ({الفاصل: 2000}).carousel ('Cycle') يحلق كل إطار من اليسار إلى اليمين.
.Carousel ('Pause') يوقف carousel.
. Carousel (رقم) يضع carousel إلى الإطار المحدد (يبدأ تراكب الإطار بـ 0 ، على غرار صفيف).
. Carousel ('Prev') يعود إلى الإطار السابق.
. Carousel ('next') انتقل إلى الإطار التالي.
حدث
يعرض مكون Bootstrap Carousel حدثين للاستماع.
$ ('#carousel-example-generic'). on ('slide.bs.carousel' ، function () {Alert (1) ؛})هذا يربط الأحداث بمكون carousel ، ثم ينفذها في وقت التشغيل المقابل. تم شرح ذلك كثيرًا في المكونات السابقة JavaScript ، والنماذج كلها عامة ، بحيث يمكنك استخدامها فقط.
صورة
هذه هي العديد من المكونات الإضافية للركض العملية ، والتي لها نتائج جيدة للغاية. إذا تم استخدامها بشكل معقول ، فسيضيفون دائمًا نقاطًا إلى صفحتك. آمل أن يكون ذلك مفيدًا لتعلم الجميع.
إذا لم تكن راضيًا ، فيمكنك التحقق من هذه المقالات للدراسة المتعمقة: يحرز محرر "Bootstrap Learning Tutorial" تقدمًا معك!
إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وتوصيل موضوعين مثيرين لك:
Bootstrap البرنامج التعليمي العملي
تعليمي استخدام المكونات الإضافية Bootstrap
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.