شبيبة كاروسيل (carousel.js)
البرنامج المساعد كاروسيل هو مكون لركوب الدراجات من خلال العناصر، مثل دائري (عرض الشرائح).
لتعليمي حول دوارات، اقرأ Bootstrap كاروسيل التعليمي .
غير معتمدة دوارات بشكل صحيح في Internet Explorer 9 وفي وقت سابق (لأنها تستخدم التحولات CSS3 والرسوم المتحركة لتحقيق التأثير الشريحة): مذكرة.
فئات كاروسيل المساعد
| صف مدرسي | وصف |
|---|---|
| .carousel | يخلق دائري |
| .slide | ويضيف الانتقال المغلق وتأثير الحركة عند انزلاق من عنصر واحد إلى آخر. إزالة هذه الطبقة إذا كنت لا تريد هذا التأثير |
| .carousel-indicators | ويضيف مؤشرات دائري. وهذه هي نقاط قليلة في الجزء السفلي من كل شريحة (الذي يشير إلى عدد الشرائح هناك في دائري، والذي حرك المستعمل يشاهدون حاليا) |
| .carousel-inner | ويضيف الشرائح إلى دائري |
| .item | يحدد مضمون كل شريحة |
| .left carousel-control | يضيف الزر الأيسر للدائري، الذي يسمح للمستخدم للعودة بين الشرائح |
| .right carousel-control | يضيف الزر الأيمن للدائري، الذي يسمح للمستخدم للذهاب إلى الأمام بين الشرائح |
| .carousel-caption | يحدد التسمية التوضيحية للدائري |
عبر data-* سمات
و data-ride="carousel" سمة ينشط دائري.
و data-slide و data-slide-to سمات يحدد التي تنزلق للذهاب الى.
و data-slide السمة تقبل قيمتين: السابق أو التالي، في حين data-slide-to قبول الأرقام.
مثال
<!--
Carousel -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!--
Carousel Indicators -->
<li data-target="#myCarousel" data-slide-to="1"></li>
<!--
Carousel Controls -->
<a
class="left carousel-control" href="#myCarousel" data-slide="prev">
انها محاولة لنفسك » عن طريق جافا سكريبت
تمكين يدويا مع:
مثال
// Activate Carousel
$("#myCarousel").carousel();
// Enable
Carousel Indicators
$(".item").click(function(){
$("#myCarousel").carousel(1);
});
// Enable Carousel Controls
$(".left").click(function(){
$("#myCarousel").carousel("prev");
});
انها محاولة لنفسك » خيارات دائري
يمكن أن تنتقل عن طريق الخيارات سمات البيانات أو جافا سكريبت. لسمات البيانات، إلحاق اسم الخيار لبالبيانات، كما في بيانات الفاصلة = "".
| اسم | اكتب | افتراضي | وصف | جربها |
|---|---|---|---|---|
| interval | number, or the boolean false | 5000 | يحدد تأخير (في ميلي ثانية) بين كل شريحة. ملاحظة: تعيين الفاصل الزمني إلى false لوقف عناصر من الانزلاق تلقائيا | باستخدام شبيبة باستخدام البيانات |
| pause | string, or the boolean false | "hover" | توقف دائري من الذهاب من خلال الشريحة التالية عندما يدخل مؤشر الماوس دائري، ويستأنف انزلاق عندما يترك مؤشر الماوس دائري ملاحظة: تعيين وقفة لكاذبة لوقف القدرة على وقفة على التحويم | باستخدام شبيبة باستخدام البيانات |
| wrap | boolean | true | تحديد ما إذا كان دائري يجب أن تذهب من خلال جميع الشرائح بشكل مستمر، أو تتوقف عند الشريحة الأخيرة
| باستخدام شبيبة باستخدام البيانات |
طرق دائري
يسرد الجدول التالي أساليب دائري كل ما هو متاح.
| طريقة | وصف | جربها |
|---|---|---|
| .carousel( options ) | ينشط دائري مع وجود خيار. رؤية الخيارات المذكورة أعلاه لقيم صالحة | جربها |
| .carousel("cycle") | يمر البنود دائري من اليسار إلى اليمين | جربها |
| .carousel("pause") | توقف دائري من الذهاب من خلال البنود | جربها |
| .carousel(number) | يذهب إلى شيء محدد (صفر القائم: البند الأول هو 0، البند الثاني هو 1، الخ ..) | جربها |
| .carousel("prev") | يذهب إلى العنصر السابق | جربها |
| .carousel("next") | يذهب إلى البند التالي | جربها |
أحداث دائري
يسرد الجدول التالي الأحداث دائري كل ما هو متاح.
| حدث | وصف | جربها |
|---|---|---|
| slide.bs.carousel | يحدث عندما دائري على وشك الانزلاق من عنصر واحد إلى آخر | جربها |
| slid.bs.carousel | يحدث عند انتهاء دائري انزلاق من عنصر واحد إلى آخر | جربها |
أمثلة
تعليق على الشرائح
إضافة <div class="carousel-caption"> في كل <div class="item"> لخلق توضيحية لكل شريحة:
مثال
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner"
role="listbox">
<div class="item active">
<img src="img_chania.jpg" alt="Chania">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The
atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div
class="item">
<img src="img_chania2.jpg"
alt="Chania">
<div
class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div
class="item">
<img src="img_flower.jpg"
alt="Flower">
<div
class="carousel-caption">
<h3>Flowers</h3>
<p>Beatiful
flowers in Kolymbari, Crete.</p>
</div>
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>Beatiful
flowers in Kolymbari, Crete.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a
class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a
class="right carousel-control" href="#myCarousel" role="button"
data-slide="next">
<span class="glyphicon glyphicon-chevron-right"
aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
انها محاولة لنفسك »