نمادها

شما اینجا هستید

آموزش Bootstrap جلسه بیست و نهم (Carousel)

در خدمت شما هستیم با آموزش Bootstrap جلسه بیست و نهم (Carousel)

آموزش Bootstrap جلسه بیست و نهم (Carousel) از سری آموزش های تک قسمتی است

سلام برنامه در این جلسه از آمورش به شما نحوه ساخت اسلایدر در بوت استرپ را آموزش می دهد

در این آموزش تنها با کلاس های بوت استرپ می توانید اسلایدر طراحی کنید

این اسلایدر کاملا رسپانسیو بوده و در هر مرورگر و رزولیشنی قابل نمایش است

لازم به ذکر است که برای ساخت این اسلایدر حتما باید jQuery را اضافه کنید

قابلیت اجرای اتوماتیک اسلاید ها از ویژگی های کلاس بوت استرپ است

 

carousel

همانطور که گفتیم از carousel برای ساخت اسلایدر استفاده میشود شما برای اجرای فایل های جیکوئری و جاوا اسکریپت این اسلایدر باید فایل js آن را در سایت خود لود کنید. برای اینکار هم میتوانید از فایل carousel.js استفاده کنید و هم از فایل bootstrap.js البته توجه کنید که هر ۲ را با هم لود نکنید وجود یکی برای اجرای کد ها کافی است.

نکته ای که باید به آن توجه کنید این است که carousel در Internet Explorer 9 و یا نسخه های قدیمی تر آن اجرا نمیشود. علت آن استفاده از دستورات css3 است که این نسخه از مرورگر آن را پشتیبانی نمیکند.

 

چگونه میتوانیم به کمک carousel اسلایدر بسازیم؟

برای پاسخ به این سوال باید ابتدا با نحوه ی استفاده از کد های بوت استرپ برای carousel آشنا شوید و آنها را خدمت شما معرفی کنیم شما حتما باید ابتدا div با id بسازید با نام myCarousel وسپس class با نام carousel تا فضا و بوم مد نظر برای ساخت اسلایدر به وجود بیاید همچنین به کلاس slide نیز نیاز دارید برای موارد حرکت اسلاید و افکت های css3 .

از مقدار attribute تعریف شده data-ride با مقدار carousel استفاده میکنیم تا زمانی که صفحه لود شد بتواند انیمیشن ها را اجرا کند اگر این موضوعات برای شما گنگ است نگران نباشید در انتها نمیونه کد آماده ای را برای شما قرار میدهیم.

خوب وارد بخش شاخص های اسلایدر خود میشویم این بخش برای آن است که اول از همه بفهمیم چند اسلاید داریم و قرار است چند اسلاید به نمایش در بیاید.برای این کار از کلاس carousel-indicators استفاده میکنیم و برای نقطه گذاری و اتصال id که با نام myCarousel ساختیم از data-target استفاده میکنیم و برای مرتب کردن نمایش و رفتن به اسلاید بعدی از data-slide-to استفاده میکنیم که مقادیر ۰ ، ۱ و… را میگیرد.

و در نهایت وارد بخش کنترلی کار میشویم که به شما امکان کنترل دستی اسلایدرتان را میدهد آن موارد را برای شما لیست میکنیم:

  • نمایش تعداد اسلاید موجود برای کاربر.
  • دکمه های اسلایدر بعدی و قبلی که با نام های next و prev شناخته میشوند.
  • بالت هایی که شما امکان حرکت بین اسلاید هارا میدهند.

بخش کنترل های اسلایدر

خوب برای ایجاد موارد گفته شده شما ابتدا باید div با کلاس carousel-inner ایجاد کنید آغاز گر هر اسلاید شما کلاس item است که هر اسلاید را از دیگری جدا میکند برای اینکه در لحظه لود اسلایدری خاص نمایش داده شود میتوانید از کلاس active استفاده کنید. از کلاس carousel-caption میتوانید برای توضیحات هر اسلاید استفاده کنید و در نهایت با data-slide های next برای بعدی و prev برای قبلی میتوانید دکمه های کنترل را ایجاد کنید تمام موارد گفته شده در آموزش در کد زیر خلاصه شده اند کد زیر یک اسلایدر کامل با تمام امکانات است.

به عنوان نکته پایانی برای کنترل سرعت و موارد دیگر در این اسلایدر باید دانش جیکوئری داشته باشید.
این مورد در بحث این آموزش قرار نمیگیرد لذا در صورت علاقه به صفحه زیر مراجعه کنید:

آموزش جکوئری های کنترلی carousel

 

می توانید دیگر قسمت ها را در لینک زیر ببینید

آموزش Bootstrap جلسه بیست و هشتم (Media Object)

آموزش Bootstrap جلسه سی ام (Modal)

 

شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید

 

و یا آن را در آپارات مشاهده کنید

همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید
اگر این مطلب آموزنده بود به ما امتیاز دهید
1 ستاره2 ستاره3 ستاره4 ستاره5 ستاره (4 رای, میانگین: 4٫75 امتیاز از 5)
Loading...

این یک فایل mp4 تصویری است که با پلیر های ویدیویی قابل اجرا می باشد

دانلود آموزش Bootstrap جلسه بیست و نهم (Carousel): نوع فایل:mp4 حجم فایل:50.97 مگابایت

هر پلیر اجرا کننده فایل ویدیویی

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

code

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