ای بازار

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

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

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

اثر انیمیشن این مؤلفه به prefers-reduced-motion پرس و جو رسانه ای را ببینید بخش حرکت کاهش یافته اسناد دسترسی ما.

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

نمونه

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

.active کلاس باید به یکی از اسلایدها اضافه شود در غیر این صورت چرخ فلک قابل مشاهده نخواهد بود. همچنین مطمئن شوید که یک شناسه منحصر به فرد روی آن تنظیم کنید .carousel برای کنترل های اختیاری، به خصوص اگر از چرخ فلک های متعدد در یک صفحه استفاده می کنید. عناصر کنترل و نشانگر باید دارای الف باشندdata-bs-target ویژگی (یا href برای پیوندها) که با شناسه آن مطابقت دارد .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 class="img-fluid" src="../assets/images/gallery/10.jpg" alt="" />
            </div>
            <div class="carousel-item">
                <img class="img-fluid" src="../assets/images/gallery/8.jpg" alt="" />
            </div>
            <div class="carousel-item">
                <img class="img-fluid" src="../assets/images/gallery/1.jpg" alt="" />
            </div>
        </div>
    </div>

با کنترل

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

    <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="img-fluid" src="../assets/images/gallery/10.jpg" alt="" />
            </div>
            <div class="carousel-item">
                <img class="img-fluid" src="../assets/images/gallery/8.jpg" alt="" />
            </div>
            <div class="carousel-item">
                <img class="img-fluid" src="../assets/images/gallery/1.jpg" alt="" />
            </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="visually-hidden">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="visually-hidden">Next</span>
        </a>
    </div>

با اندیکاتورها

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

    <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
        <ol class="carousel-indicators">
            <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li>
            <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" class=""></li>
            <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" class=""></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="img-fluid" src="../assets/images/gallery/10.jpg" alt="" />
            </div>
            <div class="carousel-item">
                <img class="img-fluid" src="../assets/images/gallery/8.jpg" alt="" />
            </div>
            <div class="carousel-item">
                <img class="img-fluid" src="../assets/images/gallery/1.jpg" alt="" />
            </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="visually-hidden">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="visually-hidden">Next</span>
        </a>
    </div>

با زیرنویس

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

    <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
        <ol class="carousel-indicators">
            <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"></li>
            <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" class=""></li>
            <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" class=""></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="img-fluid" src="../assets/images/gallery/1.jpg" alt="" />
                <div class="carousel-caption d-none d-md-block">
                    <h5>First slide label</h5>
                    <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img class="img-fluid" src="../assets/images/gallery/2.jpg" alt="" />
                <div class="carousel-caption d-none d-md-block">
                    <h5>Second slide label</h5>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img class="img-fluid" src="../assets/images/gallery/3.jpg" alt="" />
                <div class="carousel-caption d-none d-md-block">
                    <h5>Third slide label</h5>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                </div>
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </a>
    </div>

متقاطع

افزودن .carousel-fade به چرخ و فلک خود برای متحرک سازی اسلایدها با انتقال محو به جای اسلاید.

    <div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="img-fluid" src="../assets/images/gallery/10.jpg" alt="" />
            </div>
            <div class="carousel-item">
                <img class="img-fluid" src="../assets/images/gallery/8.jpg" alt="" />
            </div>
            <div class="carousel-item">
                <img class="img-fluid" src="../assets/images/gallery/1.jpg" alt="" />
            </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="visually-hidden">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="visually-hidden">Next</span>
        </a>
    </div>

افزودن data-interval="" به یک .carousel-item برای تغییر مدت زمان تأخیر بین دوچرخه‌سواری خودکار تا مورد بعدی.

    <div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item" data-interval="10000">
                <img class="img-fluid" src="../assets/images/gallery/2.jpg" alt="" />
            </div>
            <div class="carousel-item active carousel-item-left" data-interval="2000">
                <img class="img-fluid" src="../assets/images/gallery/5.jpg" alt="" />
            </div>
            <div class="carousel-item carousel-item-next carousel-item-left">
                <img class="img-fluid" src="../assets/images/gallery/7.jpg" alt="" />
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </a>
    </div>

نوع تیره

افزودن .carousel-dark به .carousel برای کنترل‌ها، نشانگرها و زیرنویس‌های تیره‌تر. کنترل‌ها از پر کردن سفید پیش‌فرضشان با علامت معکوس شده‌اند filter ویژگی CSS. زیرنویس‌ها و کنترل‌ها دارای متغیرهای Sass اضافی هستند که آن را سفارشی می‌کنند color و background-color.

    <div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
        <ol class="carousel-indicators">
            <li data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class=""></li>
            <li data-bs-target="#carouselExampleDark" data-bs-slide-to="1" class=""></li>
            <li data-bs-target="#carouselExampleDark" data-bs-slide-to="2" class="active"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item" data-interval="10000">
                <img class="img-fluid" src="../assets/images/gallery/3.jpg" alt="" />
                <div class="carousel-caption d-none d-md-block">
                    <h5>First slide label</h5>
                    <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                </div>
            </div>
            <div class="carousel-item active carousel-item-left" data-interval="2000">
                <img class="img-fluid" src="../assets/images/gallery/8.jpg" alt="" />
                <div class="carousel-caption d-none d-md-block">
                    <h5>Second slide label</h5>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
            <div class="carousel-item carousel-item-next carousel-item-left">
                <img class="img-fluid" src="../assets/images/gallery/6.jpg" alt="" />
                <div class="carousel-caption d-none d-md-block">
                    <h5>Third slide label</h5>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                </div>
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleDark" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleDark" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </a>
    </div>

استفاده

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

از ویژگی های داده برای کنترل آسان موقعیت چرخ فلک استفاده کنید. data-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-، همانطور که در data-interval="".

نام نوع پیش فرض توضیحات
interval عدد 5000 مدت زمان تأخیر بین دوچرخه‌سواری خودکار یک مورد. اگر نادرست باشد، چرخ فلک به طور خودکار چرخه نخواهد شد.
keyboard بولن true آیا چرخ فلک باید به رویدادهای صفحه کلید واکنش نشان دهد یا خیر.
pause string | boolean "hover" مدت زمان تأخیر بین دوچرخه‌سواری خودکار یک مورد. اگر نادرست باشد، چرخ فلک به طور خودکار چرخه نخواهد شد.
slide string | boolean false مدت زمان تأخیر بین دوچرخه‌سواری خودکار یک مورد. اگر نادرست باشد، چرخ فلک به طور خودکار چرخه نخواهد شد.
wrap boolean true مدت زمان تأخیر بین دوچرخه‌سواری خودکار یک مورد. اگر نادرست باشد، چرخ فلک به طور خودکار چرخه نخواهد شد.
touch boolean true مدت زمان تأخیر بین دوچرخه‌سواری خودکار یک مورد. اگر نادرست باشد، چرخ فلک به طور خودکار چرخه نخواهد شد.

روش ها

روش ها و انتقال های ناهمزمان

همه متدهای API هستند نامتقارن و شروع کنید انتقال. آنها به محض شروع انتقال به تماس گیرنده باز می گردند اما قبل از اینکه تمام شود. علاوه بر این، یک روش فراخوانی بر روی a جزء انتقال نادیده گرفته خواهد شد.

برای اطلاعات بیشتر به مستندات جاوا اسکریپت ما مراجعه کنید.

می‌توانید با سازنده چرخ فلک یک نمونه چرخ فلک ایجاد کنید، برای مثال، با گزینه‌های اضافی مقداردهی اولیه کنید و شروع به چرخیدن در میان آیتم‌ها کنید:

var myCarousel = document.querySelector('#myCarousel')
    var carousel = new bootstrap.Carousel(myCarousel, {
        interval: 2000,
        wrap: false
    })
متد توضیحات
cycle در میان آیتم های چرخ و فلک از چپ به راست می چرخد.
pause در میان آیتم های چرخ و فلک از چپ به راست می چرخد.
prev در میان آیتم های چرخ و فلک از چپ به راست می چرخد.
next در میان آیتم های چرخ و فلک از چپ به راست می چرخد.
nextWhenVisible در میان آیتم های چرخ و فلک از چپ به راست می چرخد.
dispose در میان آیتم های چرخ و فلک از چپ به راست می چرخد.
getInstance در میان آیتم های چرخ و فلک از چپ به راست می چرخد.

رویدادها

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

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

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

نوع رویداد توضیحات
slide.bs.carousel هنگامی که چرخ فلک انتقال اسلاید خود را کامل کرد، شلیک می شود.
slid.bs.carousel هنگامی که چرخ فلک انتقال اسلاید خود را کامل کرد، شلیک می شود. 
var myCarousel = document.getElementById('myCarousel')

    myCarousel.addEventListener('slide.bs.carousel', function () {
        // do something...
    })

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

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

در این صفحه