يعد المكون الإضافي Carousel Bootstrap وسيلة مرنة وسريعة الاستجابة لإضافة Sliders إلى موقعك. إلى جانب ذلك ، يكون المحتوى مرنًا بما يكفي ليكون صورة أو إطارًا مضمنًا أو مقطع فيديو أو أي نوع آخر من المحتوى الذي تريد وضعه.
إذا كنت ترغب في الرجوع إلى وظيفة المكون الإضافي بشكل منفصل ، فأنت بحاجة إلى الرجوع إلى carousel.js. أو ، كما هو مذكور في الفصل الإضافي في Bootstrap ، يمكنك الرجوع إلى bootstrap.js أو إصدارات مضغوطة من bootstrap.min.js.
1. مثال
فيما يلي شريحة بسيطة تعرض مكونًا شائعًا لعنصر الحلقات باستخدام المكون الإضافي Carousel Bootstrap. لتنفيذ Carousel ، تحتاج فقط إلى إضافة الرمز مع هذه العلامة. ليست هناك حاجة لاستخدام سمات البيانات ، فقط تطوير بسيط على أساس الفصل.
<! doctype html> <html> <head> <title> pootstrap مثيل- مكون إضافي carousel بسيط </title> <link href = "/bootstrap/css/bootstrap.min.css" cript ” src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div id = "mycarousel"> <! <li data-target = "#mycarousel" data-slide-to = "2"> </li> </ol> <!-مشروع carousel-> <div> <img src = "/media/uploads/2014/07/07/07/07/07/07/07/07/07/07/0 <img src = "/media/uploads/2014/07/slide3 </body> </html>
النتائج كما يلي:
المكون الإضافي الكاروسيل البسيط
2. العنوان الاختياري
يمكنك إضافة عنوان إلى الشريحة عبر عنصر carousel-caption داخل .item. فقط ضع أي HTML اختياري هناك وسيتم محاذاة وتنسيق تلقائيًا. يوضح المثال التالي هذا:
<! doctype html> <html> <head> <title> مثيل bootstrap - عنوان المكون الإضافي carousel </title> <link href = "/bootstrap/css/boutstrap.min.css" rel = "stylesheet src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div id = "mycarousel"> <! <li data-target = "#mycarousel" data-slide-to = "2"> </li> </ol> <!-مشروع carousel-> <viv> <img src = "/media/uploads/2014/07/slide1.png" <viv> العنوان 1 </div> </div> src = "/media/uploads/2014/07/slide2.png"> <viv> العنوان 2 </viv> </viv> <viv> <img src = "/media/uploads/2014/07/slide3 data-slide = "prev"> ‹</a> <a href = "#mycarousel" data-slide = "next"> </a> </viv> </body> </html>
النتائج كما يلي:
العنوان المكون الإضافي كاروسيل
3. الاستخدام
من خلال سمة البيانات: باستخدام سمات البيانات ، من السهل التحكم في موضع الكاروسيل.
يقبل Swide بيانات الخاصية الكلمة الرئيسية السابقة أو بجانب تغيير موضع الشريحة بالنسبة للموضع الحالي.
استخدم انقطاع البيانات إلى فهرس انزلاق خام إلى أسفل سرير carousel. سوف تنقل البيانات إلى = "2" المنزلق إلى فهرس معين ، ويتم تعداد الفهرس من 0.
يتم استخدام خاصية Data Ride = "carousel" لتمييز carousel التي تبدأ تشغيل الرسوم المتحركة عند تحميل الصفحة.
من خلال JavaScript: يمكن استدعاء Carousel يدويًا من خلال JavaScript ، كما هو موضح أدناه:
$ ('. carousel'). carousel ()
4. الخيارات
هناك بعض الخيارات التي يتم تمريرها من خلال خصائص البيانات أو JavaScript. يسرد الجدول التالي هذه الخيارات:
خامسا الطريقة
فيما يلي بعض الطرق المفيدة في المكونات الإضافية:
السادس. مثال
يوضح المثال التالي استخدام الطريقة:
<! doctype html> <html> <head> <title> مثيل bootstrap - طريقة المكونات الإضافية carousel </title> <link href = "/bootstrap/css/bootstrap.min.css" cript> <script src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div id = "mycarousel"> <! <li data-target = "#mycarousel" data-slide-to = "2"> </li> </ol> <!-مشروع carousel-> <div> <img src = "/media/uploads/2014/07/07/07/07/07/07/07/07/07/07/0 <img src = "/media/uploads/2014/07/slide3 style = "text-align: center ؛"> <input type = "button" value = "start"> <input type = "button" value = "pause"> <input type = "button" value = "prevent slide"> <induction type = "button" value = </viv> </viv> <script> $ (function () {// تهيئة carousel $ (". start-slide"). انقر فوق (function () {$ ("#mycarousel"). carousel ('cycle') ؛}) ؛ // stop carousel $ ( }) ؛ $ (. $ (#mycarousel "). carousel (1) ؛ }) ؛ </script> </body> </html>النتائج كما يلي:
طريقة المكونات الإضافية Carousel
7. الأحداث
يسرد الجدول التالي الأحداث المراد استخدامها في المكون الإضافي Carousel. يمكن استخدام هذه الأحداث كخطافات في الوظائف.
مثال
يوضح المثال التالي استخدام الأحداث:
<! doctype html> <html> <و head> <title> pootstrap مثيل- الحدث المكون الإضافي carousel </title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "styleshele src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div id = "mycarousel"> <! <li data-target = "#mycarousel" data-slide-to = "2"> </li> </ol> <!-مشروع carousel-> <div> <img src = "/media/uploads/2014/07/07/07/07/07/07/07/07/07/07/0 <img src = "/media/uploads/2014/07/slide3 $ (function () {$ ('#mycarousel'). on ('slide.bs.carousel' ، function () {Alert ("يومض الحدث فورًا عندما تسمى طريقة مثيل الشريحة.") ؛}) ؛}) ؛ }) ؛ </script> </body> </html>النتائج كما يلي:
أحداث المكون الإضافي كاروسيل
وفقا للبرنامج التعليمي أعلاه ، قدمت مثال خاص بي:
يلعب المكون الإضافي Carousel عدة صور كبيرة من نفس الحجم.
// مثال أساسي. <div id = "mycarousel"> <ol> <li data-target = "#mycarousel" data-slide-to = "0"> </li> <li data-arget = "#mycarousel" data-slide-to = "1" src = "img/slide1.png"> </div> <viv> <img src = "img/slide2.png"> </viv> <viv> <img src = "img/slide2 data-slide = "prev"> ‹</a> <a href = "#mycarousel" data-slide = "next"> </a> </viv>
توضيح سمة البيانات:
1. DATA-SLIDE يقبل الكلمة الرئيسية السابقة أو بجانب تغيير موضع الشريحة بالنسبة للموضع الحالي ؛
2.DATA-SLIDE-TO ينشئ فهرس انزلاق أصلي إلى أسفل الكاروسيل. سوف تنقل البيانات إلى = "2" المنزلق إلى فهرس معين ، ويتم تعداد الفهرس من 0.
3.DATA-RIDE = "carousel" سمة المستخدم علامة carousel تبدأ تشغيل الرسوم المتحركة عند تحميل الصفحة.
إذا قمت بتسميتها في JavaScript ، فاستخدم طريقة زوج المفتاح مباشرة وإزالة البيانات ؛
// تعيين خصائص مخصصة
$ ('#mycarousel'). carousel ({// set تشغيل تلقائي/2 ثانية الفاصل: 2000 ، // اضغط على الإيقاف المؤقت: 'hover' ، // play مرة واحدة فقط التفاف: false ،}) ؛يوفر المكون الإضافي Carousel أيضًا بعض الطرق ، على النحو التالي:
// انقر فوق الزر لتنفيذ $ ('button'). on ('click' ، function () {// بعد النقر ، $ ('#mycarousel'). carousel ('cycle') ؛ // other}) ؛حدث
$ ('#mycarousel'). on ('slide.bs.carousel' ، function () {Alert ('free furn in the yuse extreal slide يسمى') ؛}) ؛ $ ('#mycarousel'). on ('slid.bs.carousel' ، function () {Alert ('free at the carousel explies a slide') ؛}) ؛لمزيد من المحتوى ، يرجى الرجوع إلى: Bootstrap التعلم التعليمي
ما سبق هو كل شيء عن هذا المقال. آمل أن يكون من المفيد أن يتعلم الجميع المكون الإضافي carousel bootstrap.