Carousel

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp4-menu.png
موارد آموزشی
۱خانه
۲شروع
۳ظرف‌ها
۴شبکه‌بندی پایه
۵تایپوگرافی
۶رنگ‌ها
۷جدول‌ها
۸تصاویر
۹جامبوترون
۱۰هشدارها
۱۱کلیدها
۱۲گروه‌های کلید
۱۳نشان‌ها (Badges)
۱۴نوارهای پیشرفت
۱۵Spinnerها
۱۶صفحه‌بندی
۱۷گروه‌های لیست
۱۸کارت‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱Navها
۲۲Navbar
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵گروه‌های ورودی
۲۶فرم‌های سفارشی
۲۷Carousel
۲۸Modal
۲۹راهنمای ابزار
۳۰Popover
۳۱Toast
۳۲Scrollspy
۳۳امکانات
۳۴Flex
۳۵آیکون‌ها
۳۶Media Objects
۳۷فیلترها
شبکه‌بندی
Theme
مرجع

Carousel یک نمایش اسلاید (به انگلیسی: Slideshow) برای چرخیدن در میان عنصرهاست.[۱]

نحوه ایجاد Carousel

مثال زیر نحوه ایجاد یک carousel با نشانگرها و کنترل‌ها را نشان می‌دهد:

مثال

 1 <div id="demo" class="carousel slide" data-ride="carousel">
 2 
 3   <!-- Indicators -->
 4   <ul class="carousel-indicators">
 5     <li data-target="#demo" data-slide-to="0" class="active"></li>
 6     <li data-target="#demo" data-slide-to="1"></li>
 7     <li data-target="#demo" data-slide-to="2"></li>
 8   </ul>
 9 
10   <!-- The slideshow -->
11   <div class="carousel-inner">
12     <div class="carousel-item active">
13       <img src="la.jpg" alt="Los Angeles">
14     </div>
15     <div class="carousel-item">
16       <img src="chicago.jpg" alt="Chicago">
17     </div>
18     <div class="carousel-item">
19       <img src="ny.jpg" alt="New York">
20     </div>
21   </div>
22 
23   <!-- Left and right controls -->
24   <a class="carousel-control-prev" href="#demo" data-slide="prev">
25     <span class="carousel-control-prev-icon"></span>
26   </a>
27   <a class="carousel-control-next" href="#demo" data-slide="next">
28     <span class="carousel-control-next-icon"></span>
29   </a>
30 
31 </div>


مشاهدهٔ نتیجه


شرح مثال

توضیحی در مورد اینکه هرکلاس در مثال بالا چه کاری انجام می‌دهد:

کلاس توصیف
.carousel ایجاد یک carousel
.carousel-indicators نشانگرها را به carousel اضافه می‌کند. نشانگرها، نقطه‌های کوچکی در بالا و پایین هر اسلاید هستند (که نشان می‌دهند چند اسلاید در carousel هستند و اکنون کدام اسلاید نمایش داده می‌شود)
.carousel-inner اضافه کردن اسلایدها به carousel
.carousel-item تعیین محتوای هر اسلاید
.carousel-control-prev یک کلید چپ (قبلی) به carousel اضافه می‌کند، که کاربر با آن بتواند در میان اسلایدها به عقب حرکت کند
.carousel-control-next یک کلید راست (بعدی) به carousel اضافه می‌کند، که کاربر با آن بتواند در میان اسلایدها به جلو حرکت کند
.carousel-control-prev-icon با .carousel-control-prev با هم برای ایجاد کلید «قبلی» استفاده می‌شود
.carousel-control-next-icon با .carousel-control-next با هم برای ایجاد کلید «بعدی» استفاده می‌شود
.slide هنگام رفتن از یک اسلاید به بعدی، حالت متحرک و انتقال CSS را به ایجاد می‌کند. اگر این حالت را نمی‌خواهید می‌توانید این کلاس را حذف کنید

اضافه کردن زیرنویس (به انگلیسی: Caption) به اسلایدها

برای ایجاد زیرنویس در هر اسلاید عنصرهای <div class="carousel-caption"> را داخل هر <div class="carousel-item"> اضافه کنید:

مثال

1 <div class="carousel-item">
2   <img src="la.jpg" alt="Los Angeles">
3   <div class="carousel-caption">
4     <h3>Los Angeles</h3>
5     <p>We had such a great time in LA!</p>
6   </div>
7 </div>


مشاهدهٔ نتیجه


مرجع کامل Carousel بوت استرپ

برای دسترسی به مرجع همهٔ امکانات Carousel، متدها و رویدادها، به مرجع Carousel JS بوت استرپ ما مراجعه کنید.


منابع آموزشی