دائري التمهيد (كاروسيل) القطعة
التمهيد دائري (كاروسيل) في المكونات هو استجابة مرنة لموقع تضيف بطريقة أسلوب التمرير. وبالإضافة إلى ذلك، والمحتوى هو مرنة بما فيه الكفاية، قد يكون صورة، والإطار جزءا لا يتجزأ، فيديو أو أي نوع آخر من المحتوى الذي تريد أن تضع.
إذا كنت ترغب في الرجوع إلى الميزات الفردية في المكونات، تحتاج إلى مرجعcarousel.js.أو كما التمهيد المساعد لمحة ذكر الفصل، يمكنك الرجوع إلىbootstrap.jsأو نسخة مضغوطة منbootstrap.min.js.
أمثلة
هنا هو شريحة بسيطة باستخدام دائري التمهيد (كاروسيل) في المكونات يظهر العنصر حلقة من المكونات المشتركة. من أجل تحقيق التناوب، وتحتاج فقط إلى إضافة رمز مع هذه العلامة. لا حاجة لاستخدام سمات البيانات، تحتاج إلى التنمية القائمة على فئة بسيطة يمكن أن يكون فقط.
أمثلة
<div معرف = "myCarousel" الطبقة = "دائري شريحة">
<! - كاروسيل (كاروسيل) المنتديات ->
<رأ الطبقة = "دائري-مؤشرات">
<لي المستهدفة البيانات = "#myCarousel" شريحة البيانات ل= "0 " الطبقة = "نشطة"> </ لى>
<لي المستهدفة البيانات = "#myCarousel" شريحة البيانات ل= "1 "> </ لى>
<لي المستهدفة البيانات = "#myCarousel" شريحة البيانات ل= "2 "> </ لى>
</ رأ>
<! - كاروسيل (كاروسيل) مشروع ->
<div الطبقة = "دائري-الداخلية">
<div الطبقة = "العنصر النشط">
على <img SRC = "/wp-content/uploads/2014/07/slide1.png" بديل = "الشريحة الأولى">
</ div>
<div الطبقة = "البند">
على <img SRC = "/wp-content/uploads/2014/07/slide2.png" بديل = "الشريحة الثانية">
</ div>
<div الطبقة = "البند">
على <img SRC = "/wp-content/uploads/2014/07/slide3.png" بديل = "الشريحة الثالثة">
</ div>
</ div>
<! - كاروسيل (كاروسيل) الملاحة ->
<A الطبقة = "تركت السيطرة دائري" أ href = "#myCarousel"
بيانات الشرائح = "السابق"> & lsaquo.
</ A>
<A الطبقة = "حق السيطرة دائري" أ href = "#myCarousel"
شريحة البيانات = "بجوار"> & rsaquo؛
</ A>
</ div>
محاولة »
وكانت النتائج على النحو التالي:
عنوان اختياري
يمكنك إضافة تعليق إلى شريحة من عنصر.carousel-شرح. البندالداخل. فقط تحتاج إلى وضع أي HTML اختيارية إلى حيث سيتم محاذاة تلقائيا وتنسيقها. يوضح المثال التالي هذه النقطة:
أمثلة
<div معرف = "myCarousel" الطبقة = "دائري شريحة">
<! - كاروسيل (كاروسيل) المنتديات ->
<رأ الطبقة = "دائري-مؤشرات">
<لي المستهدفة البيانات = "#myCarousel" شريحة البيانات ل= "0 " الطبقة = "نشطة"> </ لى>
<لي المستهدفة البيانات = "#myCarousel" شريحة البيانات ل= "1 "> </ لى>
<لي المستهدفة البيانات = "#myCarousel" شريحة البيانات ل= "2 "> </ لى>
</ رأ>
<! - كاروسيل (كاروسيل) مشروع ->
<div الطبقة = "دائري-الداخلية">
<div الطبقة = "العنصر النشط">
على <img SRC = "/wp-content/uploads/2014/07/slide1.png" بديل = "الشريحة الأولى">
<div الطبقة = "دائري-عنوان"> عنوان 1 </ div>
</ div>
<div الطبقة = "البند">
على <img SRC = "/wp-content/uploads/2014/07/slide2.png" بديل = "الشريحة الثانية">
<div الطبقة = "دائري-عنوان"> عنوان 2 </ div>
</ div>
<div الطبقة = "البند">
على <img SRC = "/wp-content/uploads/2014/07/slide3.png" بديل = "الشريحة الثالثة">
<div الطبقة = "دائري-عنوان"> عنوان 3 </ div>
</ div>
</ div>
<! - كاروسيل (كاروسيل) الملاحة ->
<A الطبقة = "تركت السيطرة دائري" أ href = "#myCarousel"
بيانات الشرائح = "السابق"> & lsaquo.
</ A>
<A الطبقة = "حق السيطرة دائري" أ href = "#myCarousel"
شريحة البيانات = "بجوار"> & rsaquo؛
</ A>
</ div>
محاولة »
وكانت النتائج على النحو التالي:
استعمال
- من خلال السمة البيانات: الملكية البيانات يمكن السيطرة عليها بسهولة دائري موقف (كاروسيل).
- السمةشريحة بيانات يقبلسابقالكلمة أو الذييليه،لتغيير موقف الشريحة نسبة إلى الوضع الحالي.
- باستخدامشريحة بيانات لتمرير رفيق إلى الشريحة الأصلية للمؤشر عجلة، شريحة بيانات ل= "2" سوف انقل شريط التمرير لمؤشر معين، فهرس من 0 إلى بدء العد.
- يستخدمالركوب البيانات = "دائري" سمة للاحتفال دوران عندما يتم تحميل الصفحة لبدء تشغيل الفيلم.
- بواسطة جافا سكريبت: كاروسيل (كاروسيل) يمكن الاستناد إليها يدويا عن طريق جافا سكريبت على النحو التالي:
$ ( '. كاروسيل'). كاروسيل ()
خيارات
هناك بعض الخيارات من خلال سمات البيانات أو جافا سكريبت لتمرير. يسرد الجدول التالي هذه الخيارات:
| 选项名称 | 类型/默认值 | Data 属性名称 | 描述 |
|---|---|---|---|
| interval | number 默认值：5000 | data-interval | 自动循环每个项目之间延迟的时间量。如果为 false，轮播将不会自动循环。 |
| pause | string 默认值："hover" | data-pause | 鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环。 |
| wrap | boolean 默认值：true | data-wrap | 轮播是否连续循环。 |
الطريق
وهنا بعض من دائري (كاروسيل) المكونات بطرق مفيدة:
| 方法 | 描述 | 实例 |
|---|---|---|
| .carousel(options) | 初始化轮播为可选的 options 对象，并开始循环项目。 |
$('#identifier').carousel({
interval: 2000
})
|
| .carousel('cycle') | 从左到右循环轮播项目。 |
$('#identifier').carousel('cycle')
|
| .carousel('pause') | 停止轮播循环项目。 |
$('#identifier').carousel('pause') |
| .carousel(number) | 循环轮播到某个特定的帧（从 0 开始计数，与数组类似）。 |
$('#identifier').carousel(number) |
| .carousel('prev') | 循环轮播到上一个项目。 |
$('#identifier').carousel('prev') |
| .carousel('next') | 循环轮播到下一个项目。 |
$('#identifier').carousel('next') |
أمثلة
يوضح المثال التالي الأسلوب:
أمثلة
<div معرف = "myCarousel" الطبقة = "دائري شريحة">
<! - كاروسيل (كاروسيل) المنتديات ->
<رأ الطبقة = "دائري-مؤشرات">
<لي المستهدفة البيانات = "#myCarousel" شريحة البيانات ل= "0 "
الطبقة = "نشطة"> </ لى>
<لي المستهدفة البيانات = "#myCarousel" شريحة البيانات ل= "1 "> </ لى>
<لي المستهدفة البيانات = "#myCarousel" شريحة البيانات ل= "2 "> </ لى>
</ رأ>
<! - كاروسيل (كاروسيل) مشروع ->
<div الطبقة = "دائري-الداخلية">
<div الطبقة = "العنصر النشط">
على <img SRC = "/wp-content/uploads/2014/07/slide1.png" بديل = "الشريحة الأولى">
</ div>
<div الطبقة = "البند">
على <img SRC = "/wp-content/uploads/2014/07/slide2.png" بديل = "الشريحة الثانية">
</ div>
<div الطبقة = "البند">
على <img SRC = "/wp-content/uploads/2014/07/slide3.png" بديل = "الشريحة الثالثة">
</ div>
</ div>
<! - كاروسيل (كاروسيل) الملاحة ->
<A الطبقة = "تركت السيطرة دائري" أ href = "#myCarousel"
بيانات الشرائح = "السابق"> & lsaquo؛ </ A>
<A الطبقة = "حق السيطرة دائري" أ href = "#myCarousel"
شريحة البيانات = "المقبل"> & rsaquo؛ </ A>
<! - أزرار التحكم ->
<div على غرار = "مواءمة النصوص: مركز ؛">
<الإدخال اكتب = "زر" الطبقة = "BTN بداية الانزلاق" القيمة = "ابدأ">
<الإدخال اكتب = "زر" الطبقة = "BTN توقف الانزلاق" القيمة = "وقفة">
<الإدخال اكتب = "زر" الطبقة = "BTN السابق الانزلاق" القيمة = "الشريحة السابقة">
<الإدخال اكتب = "زر" الطبقة = "BTN-الشريحة التالية" القيمة = "الشريحة التالية">
<الإدخال اكتب = "زر" الطبقة = "BTN شريحة واحدة" القيمة = "الشريحة 1">
<الإدخال اكتب = "زر" الطبقة = "BTN الشرائح اثنين" القيمة = "الشريحة 2">
<الإدخال اكتب = "زر" الطبقة = "BTN الشرائح الثلاث" القيمة = "شريحة 3">
</ div>
</ div>
<script>
$ (وظيفة () {
// تهيئة كاروسيل $ ( ".start تنزلق") فوق (وظيفة () {$ ( "#myCarousel") دائري ( 'دورة')؛.}) ؛. // وقف دوران . $ ( ".pause تنزلق" ) فوق (وظيفة () {$ ( "#myCarousel") كاروسيل ( 'وقفة')؛})؛ // حلقة تناوب على المشروع $ ( ".prev تنزلق") فوق (وظيفة () {$ ( "#myCarousel") دائري ( 'السابق')؛.}) ؛. // دوران دورة إلى البند التالي $ ( ".next تنزلق") فوق (وظيفة () {$ ( "#myCarousel") دائري ( 'التالي')؛.}) ؛. // حلقة دوران إلى إطار محدد $ ( ".slide واحد") انقر. (وظيفة () {$ ( "#myCarousel") دائري (0)؛.})؛. $ ( ".slide-اثنين") فوق (وظيفة () {$ ( "#myCarousel") دائري (1) ؛})؛ $ ( ".slide ثلاثة") فوق (وظيفة () {$ ( "#myCarousel") دائري (2)؛ ..})؛})؛
</ script>
محاولة »
وكانت النتائج على النحو التالي:
حدث
يسرد الجدول التالي دائري (كاروسيل) في المكونات ليتم استخدامها في هذا الحدث. ويمكن استخدام هذه الأحداث عندما وظيفة هوك.
| 事件 | 描述 | 实例 |
|---|---|---|
| slide.bs.carousel | 当调用 slide 实例方法时立即触发该事件。 |
$('#identifier').on('slide.bs.carousel', function () {
// 执行一些动作...
})
|
| slid.bs.carousel | 当轮播完成幻灯片过渡效果时触发该事件。 |
$('#identifier').on('slid.bs.carousel', function () {
// 执行一些动作...
})
|
أمثلة
يوضح المثال التالي استخدام هذا الحدث:
أمثلة
<div معرف = "myCarousel" الطبقة = "دائري شريحة">
<! - كاروسيل (كاروسيل) المنتديات ->
<رأ الطبقة = "دائري-مؤشرات">
<لي المستهدفة البيانات = "#myCarousel" شريحة البيانات ل= "0 "
الطبقة = "نشطة"> </ لى>
<لي المستهدفة البيانات = "#myCarousel" شريحة البيانات ل= "1 "> </ لى>
<لي المستهدفة البيانات = "#myCarousel" شريحة البيانات ل= "2 "> </ لى>
</ رأ>
<! - كاروسيل (كاروسيل) مشروع ->
<div الطبقة = "دائري-الداخلية">
<div الطبقة = "العنصر النشط">
على <img SRC = "/wp-content/uploads/2014/07/slide1.png" بديل = "الشريحة الأولى">
</ div>
<div الطبقة = "البند">
على <img SRC = "/wp-content/uploads/2014/07/slide2.png" بديل = "الشريحة الثانية">
</ div>
<div الطبقة = "البند">
على <img SRC = "/wp-content/uploads/2014/07/slide3.png" بديل = "الشريحة الثالثة">
</ div>
</ div>
<! - كاروسيل (كاروسيل) الملاحة ->
<A الطبقة = "تركت السيطرة دائري" أ href = "#myCarousel"
بيانات الشرائح = "السابق"> & lsaquo؛ </ A>
<A الطبقة = "حق السيطرة دائري" أ href = "#myCarousel"
شريحة البيانات = "المقبل"> & rsaquo؛ </ A>
</ div>
<script>
$ (وظيفة () {$ ( "#myCarousel ')، وفي (' slide.bs.carousel، وظيفة () {
تنبيه ( "عندما استدعاء أسلوب مثيل شريحة اثار على الفور هذا الحدث.")؛})؛})؛
</ script>
محاولة »
وكانت النتائج على النحو التالي:
