آموزش بوت استرپ
راهنمای جامع و آموزش گام به گام طراحی قالب وبسایت با bootstrap

چگونه کار می کند؟

چرخ فلک یک نمایش اسلاید برای دوچرخه سواری از طریق مجموعه ای از محتوا است، ساخته شده با تبدیل CSS 3D و کمی از جاوا اسکریپت. با یک سری تصاویر، متن یا نشانه گذاری سفارشی کار می کند. همچنین شامل پشتیبانی از کنترل ها و شاخص های قبلی / بعدی می شود.

در مرورگرهایی که API پشتیبانی از صفحه پشتیبانی می شود، چرخ فلک از کشیدن جلوگیری می کند زمانی که صفحه وب برای کاربر قابل مشاهده نیست.

لطفا توجه داشته باشید که چرخ فلک های توپی پشتیبانی نمی شوند و چرخ فلک ها به طور کلی با استانداردهای دسترسی سازگار نیستند.

در نهایت، اگر شما جاوااسکریپت خود را از منبع ایجاد می کنید، به util.js نیاز دارد.

 

مثال

چرخ فلک ها به طور خودکار ابعاد اسلاید را نرمال نمی کنند. به این ترتیب، ممکن است لازم باشد از امکانات اضافی یا سبک های سفارشی برای محتوای مناسب استفاده کنید. در حالی که چرخ ها از کنترل ها و شاخص های قبلی / بعدی پشتیبانی می کنند، به طور صریح مورد نیاز نیستند..

اطمینان حاصل کنید که یک شناسه منحصر به فرد در Carousel. برای کنترل های اختیاری تنظیم کنید، مخصوصا اگر از چندین چرخ فلک در یک صفحه استفاده می کنید.

 

فقط اسلاید ها

فقط یک چرخ فلک با اسلایدها وجود دارد توجه داشته باشید که وجود d-block. و img-fluid. بر روی تصاویر چرخ فلک به منظور جلوگیری از تنظیم تصویر پیش فرض مرورگر است.

 

 <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="..." alt="First slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="..." alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="..." alt="Third slide"> </div> </div> </div>

 

با کنترل 

افزودن کنترل های قبلی و بعدی:

 

 <div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="..." alt="First slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="..." alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="..." alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>

 

با شاخص 

شما همچنین می توانید شاخص های چرخ فلک را در کنار کنترل ها اضافه کنید.

 

 <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="..." alt="First slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="..." alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="..." alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>

 

با نوشتن شرح حال 

عناوین به اسلایدهای خود را به راحتی با عنصر carousel-caption. در هر carousel-item. اضافه کنید. آنها را می توان به راحتی در نمایشگاه های کوچک تر، همانطور که در زیر نشان داده شده است، با ابزارهای اختیاری نمایش پنهان می شود. ما ابتدا آنها را با d-none. مخفی می کنیم و آنها را بر روی دستگاه های متوسط ​​با d-md-block.باز می کنیم.

 

 <div class="carousel-item"> <img src="..." alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>...</h5> <p>...</p> </div> </div>

 

از طریق ویژگی های داده 

از ویژگی های داده ها برای کنترل موقعیت چرخ فلک به راحتی استفاده کنید. data-slide کلمات کلیدی را قبول می کند، که موقعیت اسلاید را نسبت به موقعیت فعلی آن تغییر می دهد. به جای استفاده از اسلاید داده ها، برای انتقال یک شاخص اسلاید خام به داده "data-slide-to = 2" منتقل می شود که موقعیت اسلاید را به یک شاخص خاص آغاز می کند و از 0 شروع می شود.

ویژگی "data-ride = "carousel برای علامت یک چرخ فلک به عنوان انیمیشن سازی از بارگذاری صفحه استفاده می شود. این را نمی توان در ترکیب با (غیر ضروری و غیر ضروری) واسنجی صریح جاوااسکریپت از چرخ فلک مشابه استفاده می شود.

 

از طریق جاوا اسکریپت

چرخ دستی را با دستی فراخوانی کنید:

 

 $('.carousel').carousel()

 

گزینه ها

گزینه ها می توانند از طریق ویژگی های داده یا جاوا اسکریپت منتقل شوند. برای ویژگی های داده، نام گزینه را به داده اضافه کنید، همانطور که در data-interval = "".

 

Name Type Default Description
interval number 5000 The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
keyboard boolean true Whether the carousel should react to keyboard events.
pause string | boolean "hover"

If set to "hover", pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the carousel won't pause it.

On touch-enabled devices, when set to "hover", cycling will pause on touchend (once the user finished interacting with the carousel) for two intervals, before automatically resuming. Note that this is in addition to the above mouse behavior.

ride string false Autoplays the carousel after the user manually cycles the first item. If "carousel", autoplays the carousel on load.
wrap boolean true Whether the carousel should cycle continuously or have hard stops.

 

متد ها

.carousel(options)

چرخ دنده را با یک شیء گزینه اختیاری آغاز می کند و شروع به چرخیدن از طریق موارد می کند.

 $('.carousel').carousel({ interval: 2000 })

 

.carousel('cycle')

چرخه ها را از طریق چارچوب چرخ چپ از چپ به راست.

.carousel('pause')

 

.carousel(number)

چرخه چرخ فلک به یک قاب خاص . قبل از نمایش مورد هدف، به فراخواننده برگشت می کند

.carousel('prev')

چرخه به مورد قبلی. قبل از نمایش آیتم قبلی به تماس گیرنده بازگشت

.carousel('next')

چرخه به مورد بعدی قبل از نمایش آیتم بعدی، به تماس گیرنده برگشت

.carousel('dispose')

یک چرخ فلک عنصر را از بین می برد.

 

 

مناسبت ها

کلاس چرخ فلک بوت استرپ دو رویداد را برای اتصال به عملکرد چرخ فلک ارائه می دهد. هر دو رویداد دارای ویژگی های زیر هستند:

1-direction:جهت که چرخ فلک کشویی است

2-relatedTarget:عنصر DOM که به عنوان مورد فعال قرار می گیرد.

3-from:شاخص مورد فعلی

4-to:شاخص مورد بعدی

Event Type Description
slide.bs.carousel This event fires immediately when the slide instance method is invoked.
slid.bs.carousel This event is fired when the carousel has completed its slide transition.

 

 $('#myCarousel').on('slide.bs.carousel', function () { // do something… })