تغییر سرعت یک اسلاید در اسلایدر بوتسترپ MDB Carousel
همانطور که در مقاله قبلی گفتیم اینجا درباره مباحث حرفه ای کروسل بحث میکنیم. اسلایدر بوتسترپ یکی از پرکاربردترین کمپوننت هاست. سرعت نمایش تصاویر یک اسلایدر تک به تک عدد دهی میشود. در اینجا خواهیم دید که برای افزایش یا کاهش سرعت باید مدت زمان را افزایش یا کاهش دهیم. این زمان میتواند برای هر اسلاید (هر تصویر) طبق آنچه ما عدددهی میکنیم، متفاوت باشد.
گام 1: دانلود متریال دیزاین بوتسترپ
ویدیو ها به ترتیب قرارداده شده اند. در ویدیو زیر که ویدیو اول از چهار ویدیو است، متریال دیزاین بوتسترپ ورژن 5 را دانلود میکنیم. سپس اسلایدر بوتسترپ (carousel) را از سایت کپی کرده و به داخل کدهای خودمان افزوده میکنیم. حاصل را ببینید!
گام 2: کامنت نویسی فارسی و بخش بندی کدهای اسلایدر بوتسترپ
حالا که کروسل را آوردیم بیایید کد های اورده شده را با استفاده از کامنت نوشتن به بخش های خوانا تبدیل کنیم. اینجا کامنت ها را فارسی نوشتیم. همانطور که میدانید تمیز نوشتن کدها کمک زیادی به علاقه به کدنویسی و خوانایی و سرعت یادگیری برنامه نویسی میکند.
گام 3: حذف کدهای اسلایدر بوتسترپ
کپشن های هر اسلاید را میبینید؟ هر اسلاید شامل یک عکس و چند خط کپشن است. میخواهیم فقط عکس نمایش داده شود. به سادگی میتوان کدهای مربوطه را پاک کرد تا اسلایدر بوتسترپ ما تنها تصاویر را نشان دهد.
گام 4: تغییر مدت زمان نمایش هر تصویر
در ویدیو زیر با استفاده از تغییر یک عدد میتوانیم مدت زمان نمایش هر تصویر و به عبارتی سرعت نمایش تصاویر را کم و زیاد کنیم. ما میتوانیم با استفاده از API های تعریف شده در بخش دایکومنتیشن متریال دیزاین بوتسترپ اطلاعات بیشتری بدست اوریم.
چند اسکرین شات مهم از ویدیو اخر
در تصویر بالا میبینید که اتیبیوت data-mdb-interval باید به ایتم هایی که کلاس carousel-item دارد اضافه شود.
در تصویر بالا میبینید که سه ایتم دارای کلاس های carousel-item هستند.
تصویر بالا بخش carousel در سایت متریال دیزاین بوتسترپ را نشان میدهد. که برای دیدن API کافیست روی دکمه آن کلیک شود.
در تصویر بالا مشاهده میکنید که اتریبیوت data-mdb-interval اینجا با عنوان کوتاه interval و با مقدار پیشفرض 5000 آمده است. همانطور که در ویدیو اخر دیدید ما این مقدار را بسیار تغییر دادیم تا سرعت اسلایدر بوتسترپ را کم و زیاد کنیم.
در مقاله بعدی درباره کلاس های مربوط به رنگ در متریال دیزاین بوتسترپ بحث خواهیم کرد.