• بخش 43 – طراحی وب واکنش گرا ، Carousel در Bootstrap
بخش 43 – طراحی وب واکنش گرا ، Carousel در Bootstrap
1395/03/01 - 16:16:01 // Responsive Web Design // 1 نظر // 284 بازدید

Slideshow ها بسیار متداول می باشند ، و برای اخبار ، موارد تجاری ، ویدئوها و ... در یک سایت مورد استفاده قرار می گیرند . ساختن چنین slideshow ی می تواند بسیار زمان گیر و البته مستعد ایرادات فراوان باشد . در این بخش ما یاد می گیریم که چگونه با استفاده از bootstrap یک carousel زیبا بسازیم .

بخش 43 طراحی وب واکنش گرا ، Carousel در Bootstrap

Slideshow ها بسیار متداول می باشند ، و برای اخبار ، موارد تجاری ، ویدئوها و ... در یک سایت مورد استفاده قرار می گیرند . ساختن چنین slideshow ی می تواند بسیار زمان گیر و البته مستعد ایرادات فراوان باشد . در این بخش ما یاد می گیریم که چگونه با استفاده از bootstrap یک carousel زیبا بسازیم .

کد مربوط به ساخت یک carousel بصورت زیر می باشد :

همانگونه که در کدهای بالا ملاحظه می کنید ، container اصلی carousel ما دارای دو کلاس با نام های carousel و slide می باشد . کلاس slide برای افزودن افکت slide به هر slide در پلاگین carousel ما می باشد . همچنین باید یک خصیصه ی سفارشی با نام data-ride داشته باشیم که به bootstrap بگوید که به محض بارگزاری صفحه اسلایدها را به نمایش در آورد . بدون این خصیصه carousel شما بصورت اتوماتیک کار نخواهد کرد و صبر می کند تا شما بصورت دستی اسلایدها را تغییر دهید .

هر پلاگین carousel دارای سه بخش اندیکاتور ، بدنه ی اصلی و کنترل ها می باشد .

برای ساختن اندیکاتور یک carousel شما باید یک لیست ترتیبی ساخته که دارای کلاس carousel-indicators باشد . تعداد li های موجود در آن بستگی به تعداد اسلایدهایی دارد که می خواهید بنمایش درآورید . هر li باید دارای یک خصیصه ی data-target باشد که مقدار آن برابر با شناسه ی کانتینر carousel شما خواهد بود . همچنین دارای خصیصه ای با عنوان data-slide-to می باشد برابر با عدد ترتیبی ای می باشد که اسلاید به آن تنظیم شده است .

در مرحله ی بعدی ما باید قلب یک carousel یا همان اسلایدها را بسازیم . در ابتدا ما یک wrapper برای تمامی اسلایدها خواهیم ساخت . که آن را باید یک تگ div و کلاس carousel-inner خواهیم ساخت . هر اسلاید با یک تگ div ساخته می شوند که کلاس item را با خود بهمراه دارند . هر آیتم دارای یک عکس و متنی در زیر آن می باشند . هر تصویر می تواند یک عنوان مرتبط داشته باشد که با استفاده از یک تگ div که دارای کلاس carousel-caption می باشد ، ایجاد می گردد . این عنوان می تواند با هر یک از تگ های <h1> , <h2> , <h3> و ... ساخته شود . برای متن مرتبط در زیر عنوان می توانید از تگ <p> استفاده نمایید .

اینکارها را برای هر یک از آیتم های اسلاید خود تکرار خواهیم کرد . بعد از اتمام ساخت تمامی اسلایدها نوبت به ایجاد یک کنترل برای carousel می رسد .

کنترل های carousel با استفاده از تگ های <a> و کلاس carousel-control و همچنین یکی از کلاس های left یا right ساخته می شوند . خصیصه ی href در این کنترل ها باید شناسه ی carousel wrapper باشد .

حال زمان آن رسیده تا چیزی که ساختیم را در مرورگر اجرا کنیم :

ما بدون استفاده از کدهای css و یا javascript جداگانه توانستیم یک carousel خوب و کاربردی بسازیم .

نکته : پلاگین carousel در مرورگرهای بالاتر از IE8 کار می کند . این پلاگین در مرورگرهایی که از CSS3 بطور کامل پشتیبانی نکنند بدرستی اجرا نخواهد شد .

Carousel و جاوا اسکریپت

برای فراخوانی carousel در جاوا اسکریپت ، bootstrap متد carousel() را دارد . برای تغییر رفتار پیش فرض این پلاگین شما می توانید مقادیر خود را با استفاده از شیء option به این متد ارسال نمایید .

تنها سه تنظیم برای این پارامتر وجود دارد که : interval , pause و wrap می باشند . کد زیر مربوط به مقداردهی این تنظیمات می باشد :

مقدار interval زمان تاخیر برای اجرای اسلاید بعدی را بصورت میلی ثانیه دریافت می نماید . مقدار pause تنها مقدار hover را قبول می کند که به Bootstrap می گوید که هنگامی که ماوس روی آن رفت متوقف شود . و در نهایت wrap یک مقدار true , false دریافت کرده و تعیین می نماید که چرخش اسلایدها روشن باشد یا خاموش . اگر برابر با true باشد ، carousel شروع به نمایش اسلایدها از یک تا آخر کرده و سپس نمایش بعد از آخرین اسلاید ادامه خواهد یافت . پارامترهای دیگری که می تواند به متد carousel() ارسال نمود بشرح زیر می باشند :

1. Cycle : برای فعالسازی گردش carousel بکار می رود .

2. Pause : برای متوقف کردن اسلایدها توسط javascript استفاده می شود .

3. Number : برای مقداردهی زمان تاخیر بین دو اسلاید بکار می رود .

4. Prev : برای رفتن به اسلاید قبل بکار می رود .

5. Next : برای رفتن به اسلاید بعدی بکار می رود .

کنترل carousel با دو رویداد می آید :

1. Slide.bs.carousel : قبل از تعویض اسلاید رخ می دهد .

2. Slid.bs.carousel : بعد از تعویض یک اسلاید رخ می دهد .

در زیر نمونه کدهای استفاده از رویدادها را ملاحظه می نمایید :

پس از قراردادن این کدها در HTML خود و سپس مشاهده ی بخش console مرورگر گوگل کروم نتیجه ی زیر را می بینید :

دانلود سورس تمرین این قسمت

شاد و سلامت باشید

محمد جعفری فوتمی

محمد جعفری فوتمی
معرفی نویسنده : محمد جعفری فوتمی

از سال 1382 بطور تخصصی در زمینه ی طراحی وب سایت کار کرده ام و در طی 12 سال گذشته تجربیاتی را کسب کرده ام که در هیچ کتاب و منبع آنلاینی یافت نمی شود ، تصمیم گرفته ام تا این تجربیات را در قالب مقالاتی به اشتراک بگذارم . امیدوارم مفید واقع شود .

امتیاز به مطلب
           
نظرات کاربران
ارسال نظر