كاروسيل المساعد
البرنامج المساعد كاروسيل هو مكون لركوب الدراجات من خلال العناصر، مثل دائري (عرض الشرائح).
نصيحة: الإضافات يمكن تضمينها بشكل فردي (باستخدام Bootstrap's فرد "carousel.js" ملف)، أو في كل مرة (باستخدام "bootstrap.js" أو "bootstrap.min.js" ).
دائري مثال
خانيا
الجو في خانيا لديه لمسة من فلورنسا والبندقية.
خانيا
الجو في خانيا لديه لمسة من فلورنسا والبندقية.
الزهور
الزهور الجميل في كوليمباري، كريت.
الزهور
الزهور الجميل في كوليمباري، كريت.
غير معتمدة دوارات بشكل صحيح في Internet Explorer 9 وفي وقت سابق (لأنها تستخدم التحولات CSS3 والرسوم المتحركة لتحقيق التأثير الشريحة): مذكرة.
كيفية إنشاء كاروسيل
يوضح المثال التالي كيفية إنشاء دائري الأساسي:
مثال
<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>
<div
class="item">
<img src="img_chania2.jpg"
alt="Chania">
</div>
<div
class="item">
<img src="img_flower.jpg"
alt="Flower">
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower">
</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>
انها محاولة لنفسك » وأوضح مثال
الأبعد <div> :
تتطلب دوارات استخدام معرف (في هذه الحالة id="myCarousel" ) للضوابط دائري بشكل صحيح.
و class="carousel" يحدد أن هذا <div> يحتوي على دائري.
و .slide الطبقة تضيف تأثير انتقال المغلق والرسوم المتحركة، مما يجعل العناصر الشريحة عندما يظهر عنصر جديد. حذف هذه الفئة إذا كنت لا تريد هذا التأثير.
و data-ride="carousel" السمة يقول التمهيد لبدء تحرك دائري على الفور عند تحميل الصفحة.
و"مؤشرات" جزء:
المؤشرات هي نقاط قليلة في الجزء السفلي من كل شريحة (الذي يشير إلى عدد الشرائح هناك في دائري، والذي حرك المستخدم بعرضها حاليا).
يتم تحديد المؤشرات في قائمة مرتبة مع الطبقة .carousel-indicators .
و data-target تشير السمة إلى معرف دائري.
و data-slide-to ويعزو يحدد التي تنزلق للذهاب إلى، عند النقر على نقطة محددة.
و"التفاف للشرائح" جزء:
يتم تحديد الشرائح في <div> مع الطبقة .carousel-inner .
يتم تعريف مضمون كل شريحة في <div> مع الطبقة .item . يمكن أن يكون هذا النص أو الصور.
و .active يحتاج إلى إضافته إلى واحدة من شرائح الطبقة. وإلا فإن دائري لا تكون مرئية.
"اليسار والضوابط الصحيحة" جزء:
ويضيف هذا الرمز "اليسار" وأزرار "الصحيحة" التي تسمح للمستخدم للذهاب ذهابا وإيابا بين الشرائح يدويا.
و data-slide السمة تقبل الكلمات الرئيسية "prev" أو "next" ، الذي يغير موقف الشريحة نسبة إلى موقعها الحالي.
اضافة تعليق على الشرائح
إضافة <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>
انها محاولة لنفسك » استكمال Bootstrap كاروسيل المرجعي
للإشارة كاملة لجميع دائري الخيارات والأساليب والأحداث، انتقل إلى لدينا Bootstrap شبيبة كاروسيل المرجعي .