چرخ فلک
یک جزء نمایش اسلاید برای دوچرخه سواری در میان عناصر - تصاویر یا اسلایدهای متن - مانند چرخ فلک.
چگونه کار می کند
چرخ فلک یک نمایش اسلاید برای دوچرخه سواری در یک سری محتوا است که با تبدیل های سه بعدی CSS و کمی جاوا اسکریپت ساخته شده است. با مجموعه ای از تصاویر، متن یا نشانه گذاری سفارشی کار می کند. همچنین شامل پشتیبانی از کنترل ها و نشانگرهای قبلی/ بعدی است.
در مرورگرهایی که صفحه Visibility API پشتیبانی میشود، هنگامی که صفحه وب برای کاربر قابل مشاهده نیست (مانند زمانی که برگه مرورگر غیرفعال است، پنجره مرورگر به حداقل میرسد و غیره)، چرخ فلک از لغزش جلوگیری میکند.
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>
Crossfade
به چرخ فلک خود اضافه .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=""
به a اضافه کنید..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
اگر از CSS کامپایل شده استفاده می کنید، می توان مدت زمان انتقال را با $carousel-transition-duration
متغیر Sass قبل از کامپایل یا سبک های سفارشی تغییر داد. اگر چندین انتقال اعمال می شود، مطمئن شوید که انتقال تبدیل ابتدا تعریف شده است (به عنوان مثال 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"
برای مقداردهی اولیه چرخ فلک خود استفاده نمی کنید، باید خودتان آن را مقداردهی اولیه کنید. نمی توان آن را در ترکیب با (زائد و غیر ضروری) مقداردهی اولیه صریح جاوا اسکریپت از همان چرخ فلک استفاده کرد.
از طریق جاوا اسکریپت
تماس دستی چرخ فلک با:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
گزینه ها
گزینه ها را می توان از طریق ویژگی های داده یا جاوا اسکریپت منتقل کرد. data-bs-
برای ویژگی های داده، نام گزینه را به مانند در ضمیمه کنید data-bs-interval=""
.
نام | تایپ کنید | پیش فرض | شرح |
---|---|---|---|
interval |
عدد | 5000 |
مدت زمان تأخیر بین دوچرخهسواری خودکار یک مورد. اگر false ، چرخ فلک به طور خودکار چرخه نمی شود. |
keyboard |
بولی | true |
آیا چرخ فلک باید به رویدادهای صفحه کلید واکنش نشان دهد یا خیر. |
pause |
رشته | بولی | 'hover' |
اگر روی تنظیم شود در دستگاههای دارای قابلیت لمس، وقتی روی تنظیم شود |
ride |
رشته | بولی | false |
پس از اینکه کاربر به صورت دستی اولین مورد را چرخاند، چرخ فلک را به صورت خودکار پخش می کند. اگر روی تنظیم شود 'carousel' ، چرخ فلک را در حالت بارگذاری به طور خودکار پخش می کند. |
wrap |
بولی | true |
اینکه چرخ فلک باید به طور مداوم چرخه بزند یا توقف های سخت داشته باشد. |
touch |
بولی | true |
آیا چرخ فلک باید از تعاملات تند کشیدن به چپ/راست در دستگاههای صفحه لمسی پشتیبانی کند یا خیر. |
مواد و روش ها
روش ها و انتقال های ناهمزمان
همه متدهای API ناهمزمان هستند و یک انتقال را شروع می کنند . آنها به محض شروع انتقال اما قبل از پایان آن به تماس گیرنده باز می گردند . علاوه بر این، فراخوانی متد بر روی یک جزء انتقال نادیده گرفته خواهد شد .
میتوانید با سازنده چرخ فلک یک نمونه چرخ فلک ایجاد کنید، برای مثال، با گزینههای اضافی مقداردهی اولیه کنید و شروع به چرخیدن در میان آیتمها کنید:
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 |
روش ایستا که یک نمونه چرخ و فلک مرتبط با یک عنصر 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...
})