چرخ فلک

یک جزء نمایش اسلاید برای دوچرخه سواری در میان عناصر - تصاویر یا اسلایدهای متن - مانند چرخ فلک.

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

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

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

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

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

مثال

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

کلاس .activeباید به یکی از اسلایدها اضافه شود در غیر این صورت چرخ فلک قابل مشاهده نخواهد بود. همچنین مطمئن شوید که یک شناسه منحصر به فرد را .carouselبرای کنترل های اختیاری تنظیم کنید، به خصوص اگر از چرخ فلک های متعدد در یک صفحه استفاده می کنید. عناصر کنترل و نشانگر باید دارای data-targetویژگی (یا hrefبرای پیوندها) باشند که با شناسه .carouselعنصر مطابقت داشته باشد.

فقط اسلایدها

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

<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=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" 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=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" 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=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" 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.

اولین برچسب اسلاید

Nulla vitae elit libero، یک pharetra augue mollis interdum.

برچسب اسلاید دوم

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

برچسب اسلاید سوم

commodo cursus magna، vel scelerisque nisl consectetur.

قبلی بعد

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

Crossfade

به چرخ فلک خود اضافه .carousel-fadeکنید تا به جای اسلاید، اسلایدها را با تغییر رنگ محو کنید.

قبلی بعد

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleFade" 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="#carouselExampleFade" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

استفاده

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

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

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

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

تماس دستی چرخ فلک با:

$('.carousel').carousel()

گزینه ها

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

مواد و روش ها

.carousel(options)

چرخ فلک را با گزینه‌های اختیاری راه‌اندازی می‌کند objectو شروع به دوچرخه‌سواری در میان آیتم‌ها می‌کند.

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

.carousel('cycle')

در میان آیتم های چرخ و فلک از چپ به راست می چرخد.

.carousel('pause')

چرخ و فلک را از چرخاندن وسایل جلوگیری می کند.

.carousel(number)

چرخ فلک را به یک فریم خاص (بر اساس 0، شبیه به یک آرایه) چرخه می کند. قبل از اینکه مورد هدف نشان داده شود (یعنی قبل از وقوع رویداد) به تماس گیرنده برمی گردد .slid.bs.carousel

.carousel('prev')

چرخه به مورد قبلی. قبل از اینکه مورد قبلی نشان داده شود (یعنی قبل از وقوع رویداد) به تماس گیرنده برمی گردد .slid.bs.carousel

.carousel('next')

چرخه به مورد بعدی. قبل از اینکه مورد بعدی نشان داده شود (یعنی قبل از وقوع رویداد) به تماس گیرنده برمی گردد .slid.bs.carousel

.carousel('dispose')

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

مناسبت ها

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

• direction: جهتی که چرخ فلک در آن می لغزد (یا "left"یا "right").
• relatedTarget: عنصر DOM که به عنوان آیتم فعال در جای خود قرار می گیرد.
• from: نمایه مورد فعلی
• to: نمایه مورد بعدی

همه رویدادهای چرخ و فلک به سمت خود چرخ و فلک شلیک می شوند (یعنی در <div class="carousel">).

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

تغییر مدت زمان انتقال

.carousel-itemاگر از CSS کامپایل شده استفاده می کنید، می توان مدت زمان انتقال را با $carousel-transitionمتغیر Sass قبل از کامپایل یا سبک های سفارشی تغییر داد. اگر چندین انتقال اعمال می شود، مطمئن شوید که انتقال تبدیل ابتدا تعریف شده است (به عنوان مثال transition: transform 2s ease, opacity .5s ease-out).