در این بخش به بررسی کامپوننت کاروسل در فریم ورک بوت استرپ می‌پردازدیم. کامپوننت Carousel در بوت استرپ برای نمایش مجموعه‌ای چرخشی از تصاویر یا محتوا به صورت اسلایدشو استفاده می‌شود.
مرور کلی
- این کامپوننت امکانات متنوعی برای شخصی‌سازی ارائه می‌دهد، از جمله نوع انیمیشن انتقال اسلاید، تنظیم بازه زمانی بین اسلایدها، و کنترل‌های ناوبری.
- کاروسل به کاربران اجازه می‌دهد به‌راحتی میان محتوا جابجا شوند و معمولاً برای نمایش محصولات یا محتوای ویژه در صفحات وب مورد استفاده قرار می‌گیرد.
- برای دستیابی به عملکرد بهینه، باید کاروسل از طریق متد سازنده (constructor) به صورت دستی مقداردهی اولیه شود. در غیر این صورت، برخی رویدادها (به‌ویژه آن‌هایی که برای پشتیبانی از لمس یا سوایپ لازم‌اند) تا زمانی که کاربر یکی از کنترل‌ها یا نشانگرها را فعال نکند، ثبت نمی‌شوند.
- اگر کاروسل دارای ویژگی
data-bs-ride="carousel"باشد، بوت استرپ آن را به‌طور خودکار هنگام بارگذاری صفحه مقداردهی اولیه می‌کند. در این حالت نیازی به راه‌اندازی دستی نیست. - بوت استرپ از استفاده از کاروسل‌های تو در تو (nested carousels) پشتیبانی نمی‌کند. این نوع ساختار معمولاً باعث مشکلاتی در دسترسی‌پذیری و تجربه کاربری می‌شود.
- افکت انیمیشنی کاروسل بسته به media query با عنوان
prefers-reduced-motionفعال یا غیرفعال می‌شود.
در ادامه، یک نمونه ساده از کاروسل را مشاهده می‌کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!DOCTYPE html> <html> <head> <title>Bootstrap - Carousel</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h1 class="text-center">Carousel example</h1> <div id="carouselExample" class="carousel slide"> <center> <div class="carousel-inner bg-secondary"> <div class="carousel-item active"> <p class="text-bg-danger display-6">Slide 1</p> <img src="/bootstrap/images/tutimg.png" alt="GFG" width="600" height="300" class="d-block w-50" alt="..."> </div> <div class="carousel-item"> <p class="text-bg-danger display-6">Slide 2</p> <img src="/bootstrap/images/profile.jpg" alt="GFG" width="300" height="400" class="d-block w-50" alt="..."> </div> <div class="carousel-item"> <p class="text-bg-danger display-6">Slide 3</p> <img src="/bootstrap/images/scenery.jpg" alt="GFG" width="300" height="500" class="d-block w-50" alt="..."> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" 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="#carouselExample" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </center> </div> </body> </html> |
نکات مهمی که باید به خاطر داشته باشید:
-
ابعاد اسلایدها در کامپوننت کاروسل به صورت خودکار یکسان‌سازی نمی‌شوند.
-
برای مشخص کردن اندازه محتوا در کاروسل، باید از ابزارهای کمکی (utilities) یا استایل های سفارشی استفاده کنید.
-
دکمه‌های قبلی/بعدی (previous/next controls) و نشانگرها (indicators) به صورت پیش‌فرض پشتیبانی می‌شوند اما الزامی برای افزودن آن‌ها وجود ندارد. شما میتوانید بسته به نیاز پروژه، این کنترل‌ها را اضافه کرده و شخصی‌سازی کنید.
-
حتماً یکی از اسلایدها باید دارای کلاس
.activeباشد، در غیر این صورت، هیچ اسلایدی در کاروسل نمایش داده نمی‌شود. -
اگر در یک صفحه بیش از یک کاروسل دارید، حتماً برای هر کاروسل شناسه (id) یکتا تعریف کنید تا بتوانید کنترل‌های اختیاری را به درستی به آن متصل کنید.
-
کنترل‌ها و نشانگرها باید دارای ویژگی
data-bs-target(یاhrefدر صورت استفاده از لینک) باشند که مقدار آن دقیقاً با id المنت.carouselمطابقت داشته باشد.
نشانگرها (Indicators)
نشانگرها را می‌توان همراه با کنترل‌های قبلی و بعدی به کار برد تا کاربر بتواند مستقیماً به اسلاید مورد نظر خود منتقل شود.
در ادامه، مثالی برای افزودن نشانگرها ارائه شده است:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!DOCTYPE html> <html> <head> <title>Bootstrap - Carousel</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h1 class="text-center">Carousel Indicators</h1> <div id="carouselExample" class="carousel slide"> <center> <div id="carouselExampleIndicators" class="carousel slide bg-secondary"> <div class="carousel-indicators text-dark"> <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"><h3>1</h3></button> <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"><h3>2</h3></button> <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"><h3>3</h3></button> </div> <div class="carousel-inner"> <div class="carousel-item active"> <img src="/bootstrap/images/scenery.jpg" alt="GFG" width="400" height="300" alt="..."> </div> <div class="carousel-item"> <img src="/bootstrap/images/scenery2.jpg" alt="GFG" width="400" height="300" alt="..."> </div> <div class="carousel-item"> <img src="/bootstrap/images/scenery3.jpg" alt="GFG" width="400" height="300" 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> </center> </div> </body> </html> |
کپشن ها (Captions)
برای هر اسلاید در کاروسل می‌توان کپشن (توضیح یا عنوان) اضافه کرد. کافی است عنصر .carousel-caption را درون هر .carousel-item قرار دهید. برای مدیریت نمایش کپشن، امکان استفاده از کلاس .d-none برای مخفی کردن آن وجود دارد. همچنین با کمک کلاس‌هایی مانند .d-{breakpoint}-block می‌توان کپشن را فقط در اندازه‌های مشخص صفحه (بر اساس breakpoint دلخواه) قابل مشاهده کرد.
این قابلیت یکی از مباحث مهم در آموزش طراحی سایت با بوت استرپ محسوب می‌شود که در پروژه های واقعی کاربرد زیادی دارد.
در ادامه، مثالی برای نحوه افزودن کپشن به اسلایدها ارائه می‌شود:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<!DOCTYPE html> <html> <head> <title>Bootstrap - Carousel</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h1 class="text-center">Carousel Captions</h1> <div id="carouselExampleCaptions" class="carousel slide bg-secondary"> <center> <div id="carouselExampleCaptions" class="carousel slide bg-secondary"> <div class="carousel-indicators text-dark"> <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"><h3>1</h3></button> <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"><h3>2</h3></button> <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"><h3>3</h3></button> </div> <div class="carousel-inner"> <div class="carousel-item active"> <img src="/bootstrap/images/template.jpg" alt="GFG" width="400" height="300" alt="..."> <div class="carousel-caption text-white"> <h5>Caption for first slide</h5> <p>This is the first slide of the carousel component.</p> </div> </div> <div class="carousel-item"> <img src="/bootstrap/images/template.jpg" alt="GFG" width="400" height="300" alt="..."> <div class="carousel-caption text-white"> <h5>Caption for second slide</h5> <p>This is the second slide of the carousel component.</p> </div> </div> <div class="carousel-item"> <img src="/bootstrap/images/template.jpg" alt="GFG" width="400" height="300" alt="..."> <div class="carousel-caption text-white"> <h5>Caption for third slide</h5> <p>This is the third slide of the carousel component.</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> </center> </div> </body> </html> |
افکت محو شدن در کاروسل بوت استرپ
برای اینکه انتقال اسلایدها به‌جای حالت جابجایی (slide) به‌صورت محو شدن تدریجی انجام شود، میتوانید کلاس .carousel-fade را به کامپوننت کاروسل اضافه کنید.
توجه داشته باشید: اگر محتوای کاروسل فقط شامل متن باشد، ممکن است لازم باشد کلاس .bg-body را به اسلایدها اضافه کنید یا با استفاده از CSS سفارشی، پس‌زمینه‌ای مناسب برای اسلایدها تعریف کنید تا افکت محو شدن (crossfade) به درستی اعمال شود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<!DOCTYPE html> <html> <head> <title>Bootstrap - Carousel</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h1 class="text-center">Carousel Animation - Fade</h1> <div id="carouselExampleFade" class="carousel slide"> <center> <div id="carouselExampleFade" class="carousel slide carousel-fade bg-secondary"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="/bootstrap/images/template.jpg" alt="GFG" width="600" height="500" alt="..."> <div class="carousel-caption text-white"> <h2>First slide</h2> </div> </div> <div class="carousel-item"> <img src="/bootstrap/images/profile.jpg" alt="GFG" width="600" height="500" alt="..."> <div class="carousel-caption text-white"> <h2>Second slide</h2> </div> </div> <div class="carousel-item"> <img src="/bootstrap/images/tutimg.png" alt="GFG" width="600" height="500" alt="..."> <div class="carousel-caption text-white"> <h2>Third slide</h2> </div> </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> </center> </div> </body> </html> |
کاروسل خودکار در بوت استرپ
- برای اینکه کاروسل به‌صورت خودکار با بارگذاری صفحه شروع به حرکت کند، کافی است گزینه
rideرا برابر با"carousel"قرار دهید. - هنگامی که نشانگر ماوس روی کاروسل قرار می‌گیرد، حرکت خودکار به‌طور موقت متوقف می‌شود. میتوانید این رفتار را با استفاده از گزینه
pauseکنترل کنید. - در مرورگرهایی که از Page Visibility API پشتیبانی می‌کنند، کاروسل به‌طور خودکار زمانی که صفحه در حالت غیرفعال یا پنجره مرورگر مینیمایز شده باشد، متوقف می‌شود.
با این حال، برای حفظ دسترس‌پذیری (accessibility)، توصیه می‌شود از کاروسل‌های خودکار خودداری کنید. اگر در صفحه خود چنین قابلیتی دارید، بهتر است دکمه یا کنترل جداگانه‌ای برای متوقف کردن یا متوقف نگه‌داشتن دستی کاروسل در نظر بگیرید تا کاربر بتواند به‌دلخواه آن را کنترل کند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!DOCTYPE html> <html> <head> <title>Bootstrap - Carousel</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h1 class="text-center">Carousel Autoplaying</h1> <center> <div id="carouselExampleRide" class="carousel slide bg-secondary" data-bs-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="/bootstrap/images/tutimg.png" alt="GFG" width="400" height="300" alt="..."> <div><p><h3>First slide</h3></p></div> </div> <div class="carousel-item"> <img src="/bootstrap/images/profile.jpg" alt="GFG" width="400" height="300" alt="..."> <div><p><h3>Second slide</h3></p></div> </div> <div class="carousel-item"> <img src="/bootstrap/images/template.jpg" alt="GFG" width="400" height="300" alt="..."> <div><p><h3>Third slide</h3></p></div> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleRide" 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="#carouselExampleRide" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> </center> </body> </html> |
زمانی که گزینه ride به جای "carousel" روی مقدار true تنظیم شود، کاروسل به‌صورت خودکار پس از بارگذاری صفحه شروع به حرکت نمی‌کند. در این حالت، چرخش اسلایدها تنها زمانی آغاز می‌شود که کاربر با کاروسل تعامل داشته باشد (مثلاً با کلیک روی دکمه‌ها یا نشانگرها).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!DOCTYPE html> <!DOCTYPE html> <html> <head> <title>Bootstrap - Carousel</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h1 class="text-center">Carousel Autoplaying on Ride</h1> <center> <div id="carouselExampleRide" class="carousel slide bg-secondary" data-bs-ride="true"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="/bootstrap/images/scenery.jpg" alt="GFG" width="600" height="500" alt="..."> <div><p><h3>First slide</h3></p></div> </div> <div class="carousel-item"> <img src="/bootstrap/images/scenery2.jpg" alt="GFG" width="600" height="500" alt="..."> <div><p><h3>Second slide</h3></p></div> </div> <div class="carousel-item"> <img src="/bootstrap/images/scenery3.jpg" alt="GFG" width="600" height="500" alt="..."> <div><p><h3>Third slide</h3></p></div> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleRide" 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="#carouselExampleRide" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> </center> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
تعیین بازه زمانی برای هر اسلاید به صورت جداگانه
برای تنظیم مدت زمان نمایش هر اسلاید به‌صورت مجزا، میتوانید ویژگی data-bs-interval="" را به عنصر .carousel-item اضافه کنید. با این کار، مدت زمانی که کاروسل پیش از حرکت به اسلاید بعدی منتظر می‌ماند برای آن اسلاید خاص تغییر می‌کند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!DOCTYPE html> <html> <head> <title>Bootstrap - Carousel</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h1 class="text-center">Carousel Autoplay Time Interval</h1> <center> <div id="carouselExampleInterval" class="carousel slide bg-secondary" data-bs-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active" data-bs-interval="2000"> <img src="/bootstrap/images/tutimg.png" alt="GFG" width="600" height="500" alt="..."> <div><p><h3>First slide</h3></p></div> </div> <div class="carousel-item" data-bs-interval="2000"> <img src="/bootstrap/images/profile.jpg" alt="GFG" width="600" height="500" alt="..."> <div><p><h3>Second slide</h3></p></div> </div> <div class="carousel-item"> <img src="/bootstrap/images/template.jpg" alt="GFG" width="600" height="500" alt="..."> <div><p><h3>Third slide</h3></p></div> </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> </center> </body> </html> |
اجرای خودکار کاروسل بدون کنترل ها
کاروسل را می‌توان طوری تنظیم کرد که به‌صورت خودکار اجرا شود بدون آنکه دکمه‌های کنترلی مانند قبلی، بعدی یا نشانگرها (indicators) در آن وجود داشته باشند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html> <html> <head> <title>Bootstrap - Carousel</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h1 class="text-center">Carousel Autoplay without controls</h1> <center> <div id="carouselExampleSlideOnly" class="carousel slide bg-secondary" data-bs-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active" data-bs-interval="2000"> <img src="/bootstrap/images/tutimg.png" alt="GFG" width="600" height="500" alt="..."> <div><p><h3>First slide</h3></p></div> </div> <div class="carousel-item" data-bs-interval="2000"> <img src="/bootstrap/images/profile.jpg" alt="GFG" width="600" height="500" alt="..."> <div><p><h3>Second slide</h3></p></div> </div> <div class="carousel-item"> <img src="/bootstrap/images/template.jpg" alt="GFG" width="600" height="500" alt="..."> <div><p><h3>Third slide</h3></p></div> </div> </div> </div> </center> </body> </html> |
غیرفعال کردن جابجایی لمسی
در دستگاه های لمسی، کاربران می توانند با کشیدن صفحه به چپ یا راست بین اسلایدهای کاروسل جابجا شوند. برای غیرفعال کردن این ویژگی، مقدار گزینه touch را برابر false قرار دهید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!DOCTYPE html> <html> <head> <title>Bootstrap - Carousel</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h1 class="text-center">Carousel disable touch swiping</h1> <center> <div id="carouselExampleControlsNoTouching" class="carousel slide bg-secondary" data-bs-touch="false"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="/bootstrap/images/profile.jpg" alt="GFG" width="600" height="500" alt="..."> <div><p><h3>First slide</h3></p></div> </div> <div class="carousel-item"> <img src="/bootstrap/images/template.jpg" alt="GFG" width="600" height="500" alt="..."> <div><p><h3>Second slide</h3></p></div> </div> <div class="carousel-item"> <img src="/bootstrap/images/profile.jpg" alt="GFG" width="600" height="500" alt="..."> <div><p><h3>Third slide</h3></p></div> </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> </center> </body> </html> |
نسخه تیره (Dark variant)
توجه: استفاده از نسخه تیره برای کامپوننت ها از نسخه 5.3.0 بوت استرپ منسوخ شده است. به جای افزودن کلاس .carousel-dark، باید ویژگی data-bs-theme="dark" را به عنصر اصلی صفحه، یک عنصر والد یا خود کامپوننت اضافه کنید.
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
پکیج آموزش پیشرفته ASP.NET Core + طراحی فروشگاه اینترنتی
- انتشار: ۸ خرداد ۱۴۰۴
دسته بندی موضوعات
- آموزش ارز دیجیتال
- آموزش برنامه نویسی
- آموزش متنی برنامه نویسی
- اطلاعیه و سایر مطالب
- پروژه برنامه نویسی
- دوره های تخصصی برنامه نویسی
- رپورتاژ
- فیلم های آموزشی
- ++C
- ADO.NET
- Adobe Flash
- Ajax
- AngularJS
- apache
- ARM
- Asp.Net
- ASP.NET MVC
- AVR
- Bootstrap
- CCNA
- CCNP
- CMD
- CSS
- Dreameaver
- EntityFramework
- HTML
- IOS
- jquery
- Linq
- Mysql
- Oracle
- PHP
- PHPMyAdmin
- Rational Rose
- silver light
- SQL Server
- Stimulsoft Reports
- Telerik
- UML
- VB.NET&VB6
- WPF
- Xml
- آموزش های پروژه محور
- اتوکد
- الگوریتم تقریبی
- امنیت
- اندروید
- اندروید استودیو
- بک ترک
- بیسیک فور اندروید
- پایتون
- جاوا
- جاوا اسکریپت
- جوملا
- دلفی
- دوره آموزش Go
- دوره های رایگان پیشنهادی
- زامارین
- سئو
- ساخت CMS
- سی شارپ
- شبکه و مجازی سازی
- طراحی الگوریتم
- طراحی بازی
- طراحی وب
- فتوشاپ
- فریم ورک codeigniter
- فلاتر
- کانستراکت
- کریستال ریپورت
- لاراول
- معماری کامپیوتر
- مهندسی اینترنت
- هوش مصنوعی
- یونیتی
- کتاب های آموزشی
- Android
- ASP.NET
- AVR
- LINQ
- php
- Workflow
- اچ تی ام ال
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- پاسکال
- پایان نامه
- پایتون
- جاوا
- جاوا اسکریپت
- جی کوئری
- داده کاوی
- دلفی
- رباتیک
- سئو
- سایر کتاب ها
- سخت افزار
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- طراحی الگوریتم
- فتوشاپ
- مقاله
- مهندسی نرم افزار
- هک و امنیت
- هوش مصنوعی
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس
