دائري
مكون عرض الشرائح للتنقل بين العناصر - الصور أو شرائح النص - مثل الرف الدائري.
كيف تعمل
العرض الدائري عبارة عن عرض شرائح للتنقل عبر سلسلة من المحتوى ، تم إنشاؤه باستخدام تحويلات CSS ثلاثية الأبعاد وقليلًا من JavaScript. إنه يعمل مع سلسلة من الصور أو النصوص أو العلامات المخصصة. كما يتضمن دعمًا للضوابط والمؤشرات السابقة / التالية.
في المستعرضات حيث يتم دعم واجهة برمجة تطبيقات Page Visibility ، ستتجنب المكتبة الانزلاق عندما لا تكون صفحة الويب مرئية للمستخدم (على سبيل المثال عندما تكون علامة تبويب المتصفح غير نشطة ، يتم تصغير نافذة المتصفح ، وما إلى ذلك).
prefers-reduced-motion
الاستعلام عن الوسائط. راجع
قسم الحركة المخفضة في وثائق إمكانية الوصول الخاصة بنا .
يُرجى العلم بأن الدوارات المتداخلة غير مدعومة وأن الدوارات غير متوافقة بشكل عام مع معايير إمكانية الوصول.
مثال
لا تعمل الدوارات على تسوية أبعاد الشرائح تلقائيًا. على هذا النحو ، قد تحتاج إلى استخدام أدوات مساعدة إضافية أو أنماط مخصصة لحجم المحتوى بشكل مناسب. بينما تدعم الدوارات عناصر التحكم والمؤشرات السابقة / التالية ، إلا أنها ليست مطلوبة بشكل صريح. أضف وخصص كما تراه مناسبًا.
يجب .active
إضافة الفئة إلى إحدى الشرائح وإلا فلن تكون الرف الدائري مرئيًا. تأكد أيضًا من تعيين عنصر فريد id
على .carousel
عناصر التحكم الاختيارية ، خاصةً إذا كنت تستخدم عدة رفوف دائرية في صفحة واحدة. يجب أن تحتوي عناصر التحكم والمؤشر على data-bs-target
سمة (أو href
للروابط) تطابق id
عنصر .carousel
العنصر.
الشرائح فقط
هنا رف دائري مع الشرائح فقط. لاحظ وجود الصور الدائرية .d-block
وعلى .w-100
الصور الدائرية لمنع محاذاة الصورة الافتراضية للمتصفح.
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
</div>
مع الضوابط
إضافة في الضوابط السابقة والتالية. نوصي باستخدام <button>
العناصر ، ولكن يمكنك أيضًا استخدام <a>
العناصر مع role="button"
.
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
مع المؤشرات
يمكنك أيضًا إضافة المؤشرات إلى الرف الدائري ، جنبًا إلى جنب مع عناصر التحكم أيضًا.
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
مع تعليق
أضف تسميات توضيحية إلى الشرائح بسهولة باستخدام .carousel-caption
العنصر الموجود داخل أي منها .carousel-item
. يمكن إخفاؤها بسهولة في منافذ العرض الأصغر ، كما هو موضح أدناه ، باستخدام أدوات عرض اختيارية . نخفيها في البداية .d-none
ونعيدها إلى الأجهزة متوسطة الحجم باستخدام .d-md-block
.
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
تبهت
أضف .carousel-fade
إلى دائرتك لتحريك الشرائح مع انتقال خفوت بدلاً من شريحة.
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
.carousel-item
الفاصل الزمني الفردي
أضف data-bs-interval=""
إلى .carousel-item
لتغيير مقدار الوقت للتأخير بين التدوير تلقائيًا إلى العنصر التالي.
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
تعطيل اللمس الضرب
تدعم الدوارات التمرير لليسار / لليمين على الأجهزة التي تعمل باللمس للتنقل بين الشرائح. يمكن تعطيل هذا باستخدام data-bs-touch
السمة. لا يشتمل المثال أدناه أيضًا على data-bs-ride
السمة data-bs-interval="false"
وبالتالي لا يتم تشغيله تلقائيًا.
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
البديل الداكن
أضف .carousel-dark
إلى .carousel
عناصر التحكم والمؤشرات والتسميات التوضيحية الأكثر قتامة. تم قلب عناصر التحكم من التعبئة البيضاء الافتراضية مع filter
خاصية CSS. تحتوي التعليقات وعناصر التحكم على متغيرات Sass الإضافية التي تخصص تنسيق color
و background-color
.
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
انتقال مخصص
.carousel-item
يمكن تغيير مدة الانتقال باستخدام $carousel-transition-duration
متغير Sass قبل التجميع أو الأنماط المخصصة إذا كنت تستخدم CSS المترجم. إذا تم تطبيق انتقالات متعددة ، فتأكد من تحديد انتقال التحويل أولاً (على سبيل المثال transition: transform 2s ease, opacity .5s ease-out
).
ساس
المتغيرات
$carousel-control-color: $white;
$carousel-control-width: 15%;
$carousel-control-opacity: .5;
$carousel-control-hover-opacity: .9;
$carousel-control-transition: opacity .15s ease;
$carousel-indicator-width: 30px;
$carousel-indicator-height: 3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer: 3px;
$carousel-indicator-opacity: .5;
$carousel-indicator-active-bg: $white;
$carousel-indicator-active-opacity: 1;
$carousel-indicator-transition: opacity .6s ease;
$carousel-caption-width: 70%;
$carousel-caption-color: $white;
$carousel-caption-padding-y: 1.25rem;
$carousel-caption-spacer: 1.25rem;
$carousel-control-icon-width: 2rem;
$carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");
$carousel-transition-duration: .6s;
$carousel-transition: transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
$carousel-dark-indicator-active-bg: $black;
$carousel-dark-caption-color: $black;
$carousel-dark-control-icon-filter: invert(1) grayscale(100);
إستعمال
عبر سمات البيانات
استخدم سمات البيانات للتحكم بسهولة في موضع الرف الدائري. data-bs-slide
يقبل الكلمات الأساسية prev
أو next
، مما يغير موضع الشريحة بالنسبة إلى موضعها الحالي. بدلاً من ذلك ، استخدم data-bs-slide-to
لتمرير فهرس شريحة أولي إلى الرف الدائري data-bs-slide-to="2"
، والذي يغير موضع الشريحة إلى فهرس معين يبدأ بـ 0
.
تُستخدم data-bs-ride="carousel"
السمة لوضع علامة على الرف الدائري باعتباره متحركًا بدءًا من تحميل الصفحة. إذا كنت لا تستخدم data-bs-ride="carousel"
لتهيئة المكتبة الخاصة بك ، فيجب عليك تهيئتها بنفسك. لا يمكن استخدامه مع (مكرر وغير ضروري) تهيئة JavaScript صريحة لنفس المكتبة.
عبر JavaScript
الاتصال الدائري يدويًا باستخدام:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
خيارات
يمكن تمرير الخيارات عبر سمات البيانات أو JavaScript. لسمات البيانات ، قم بإلحاق اسم الخيار بـ data-bs-
، كما في data-bs-interval=""
.
اسم | يكتب | تقصير | وصف |
---|---|---|---|
interval |
رقم | 5000 |
مقدار الوقت الذي يستغرقه التأخير بين تدوير عنصر تلقائيًا. إذا false ، لن يتم تدوير الرف الدائري تلقائيًا. |
keyboard |
قيمة منطقية | true |
ما إذا كان يجب أن يتفاعل الرف الدائري مع أحداث لوحة المفاتيح أم لا. |
pause |
سلسلة | قيمة منطقية | 'hover' |
في حالة الضبط على على الأجهزة التي تعمل باللمس ، عند الضبط على |
ride |
سلسلة | قيمة منطقية | false |
يتم التشغيل التلقائي للعرض الدائري بعد أن يقوم المستخدم بتدوير العنصر الأول يدويًا. في حالة الضبط على 'carousel' ، يتم التشغيل التلقائي للعرض الدائري عند التحميل. |
wrap |
قيمة منطقية | true |
ما إذا كان يجب أن يدور الرف الدائري بشكل مستمر أو يتوقف بشدة. |
touch |
قيمة منطقية | true |
ما إذا كان يجب أن يدعم الرف الدائري تفاعلات التمرير لليسار / لليمين على أجهزة الشاشات التي تعمل باللمس. |
طُرق
الطرق غير المتزامنة والانتقالات
جميع طرق API غير متزامنة وتبدأ في الانتقال . يعودون إلى المتصل بمجرد بدء الانتقال ولكن قبل أن ينتهي . بالإضافة إلى ذلك ، سيتم تجاهل استدعاء طريقة على مكون انتقالي .
راجع وثائق JavaScript الخاصة بنا للحصول على مزيد من المعلومات .
يمكنك إنشاء مثيل دائري باستخدام مُنشئ الرف الدائري ، على سبيل المثال ، للتهيئة بخيارات إضافية وبدء التنقل بين العناصر:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
طريقة | وصف |
---|---|
cycle |
يتنقل عبر عناصر الدائرة من اليسار إلى اليمين. |
pause |
يوقف الدائرة من ركوب الدراجات بين العناصر. |
prev |
دورات إلى العنصر السابق. يعود إلى المتصل قبل عرض العنصر السابق (على سبيل المثال ، قبل slid.bs.carousel وقوع الحدث). |
next |
دورات إلى العنصر التالي. يعود إلى المتصل قبل عرض العنصر التالي (على سبيل المثال ، قبل slid.bs.carousel وقوع الحدث). |
nextWhenVisible |
لا تقم بتدوير الرف الدائري إلى التالي عندما لا تكون الصفحة مرئية أو عندما لا تكون المكتبة أو العنصر الرئيسي الخاص بها مرئيًا. يعود إلى المتصل قبل عرض العنصر الهدف |
to |
يقوم بتدوير الرف الدائري إلى إطار معين (يستند إلى 0 ، على غرار المصفوفة). يعود إلى المتصل قبل عرض العنصر الهدف (على سبيل المثال ، قبل slid.bs.carousel وقوع الحدث). |
dispose |
يدمر دائرة العنصر. (يزيل البيانات المخزنة على عنصر DOM) |
getInstance |
الطريقة الثابتة التي تسمح لك بالحصول على مثيل الرف الدائري المرتبط بعنصر DOM ، يمكنك استخدامه على النحو التالي:bootstrap.Carousel.getInstance(element) |
getOrCreateInstance |
طريقة Static تُرجع مثيلاً دائريًا مرتبطًا بعنصر DOM أو تنشئ مثيلًا جديدًا في حالة عدم تهيئته. يمكنك استخدامه على النحو التالي:bootstrap.Carousel.getOrCreateInstance(element) |
الأحداث
يعرض الفصل الدائري في Bootstrap حدثين للتثبيت في وظيفة الرف الدائري. كلا الحدثين لهما الخصائص الإضافية التالية:
direction
: الاتجاه الذي تتحرك فيه دائرة الصور (إما"left"
أو"right"
).relatedTarget
: عنصر DOM الذي يتم وضعه في مكانه كعنصر نشط.from
: فهرس العنصر الحاليto
: فهرس العنصر التالي
يتم إطلاق جميع أحداث الرف الدائري على الرف الدائري نفسه (أي في <div class="carousel">
).
نوع الحدث | وصف |
---|---|
slide.bs.carousel |
ينطلق فورًا عند slide استدعاء أسلوب المثيل. |
slid.bs.carousel |
يتم تنشيطه عند اكتمال انتقال الرف الدائري الخاص به. |
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})