نمادها

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

آموزش Bootstrap 4 جلسه بیست و چهارم (Carousel)

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

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

 

Carousel چیست ؟

در حالت کلی برای چند بخشی و حالت اسلایدی در آوردن المان ها از carousel استفاده میشود. اما در اینجا منظور ما همان اسلایدر تصاویر است که به کمک چند کلاس ساده در بوت استرپ میتوانید آن را بسازید. توجه داشته باشید که این اسلایدر در خود جیکوئری دارد اما نیاز به زدن هیچ کد جیکوئری از طرف شما نیست.

 

آموزش ساخت اسلایدر

برای ساخت این اسلایدر تنها از کلاس های بوت استرپ استفاده میکنیم . قبل از هر چیز لازم است که کلاس ثابت carousel را در یک div تعریف کنیم همچنین برای اینکه انیمیشن اسلاید نیز عمل کند در کنار همین کلاس کلاس slide را نیز قرار میدهیم در این div نیاز به یک  id هم داریم که جلوتر از آن استفاده میکنیم.

حال نوبت به دکمه های پایین اسلایدر میرسد برای این کار از Ul و li استفاده میکنیم . به ul خود کلاس carousel-indicators را میدهیم و در li خود از attribute با نام data-target و مقدار id که بالاتر گفتیم استفاده میکنیم همچنین از attribute با نام data-slide-to استفاده میکنیم اگر به این attribute مقدار ۰ بدهیم تصویر اول را نشان میدهد و اگر ۱ بدهیم تصویر دوم را نشان میدهد و به همین ترتیب هرچند اسلایدری که باشد را میتوان نمایش داد.

حال نوبت نمایش تصاویر است ما تصاویر را در قالب item نمایش میدهیم برای این کار قبل از هرچیز نیاز به یک div کلی داریم که همه اسلایدر ها در آن قرار گیرند به این div کلاس carousel-inner را اختصاص میدهیم سپس یک div دیگر تعریف میکنیم برا هر اسلایدر مجزا و به آن کلاس carousel-item را اختصاص میدهیم درون این کلاس تصاویر خود را تعریف میکنیم.

دکمه های next و prev

حال به دکمه های قبلی و بعدی نیاز داریم برای این کار کافیست یک تگ a تعریف کنیم و به آن کلاس carousel-control-prev بدهیم همچنین به  href مقدار id از قبل تعریف شده دادیم علاوه بر آن به attribute با نام data-slide و مقدار prev نیاز داریم این حالت برای ما دکمه قبلی را میسازد که در نهایت برای نمایش شکل آن از تگ span با کلاس carousel-control-prev-icon استفاده میکنیم مشابه همین اقدام را برای دکمه بعدی هم داریم با این تفاوت که هرجا نوشته شده است prev به جای آن  next قرار میدهیم.

برای واضح شدن موضوع از کد زیر کمک بگیرید:

 

اسلایدر با قابلیت caption

در آموزش بالا یاد گرفتید که اسلایدر بسازید حال اگر بخواهید برای هر اسلایدر خود caption تعریف کنید میتوانید این قسمت را دنبال کنید. به قسمتی از اسلایدر که کلاس carousel-item را قرار دادیم میرویم بعد از قرار دادن تصویر خود که تگ img است یک div با کلاس carousel-caption تعریف میکنیم در داخل این div میتوانید هر چیزی بنویسید از تعریف دکمه گرفته تا یک تگ p ساده و آن را به صورت caption به نمایش در بیاورید.

برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

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

آموزش Bootstrap 4 جلسه بیست و چهارم (Carousel)
برای راحتی شما عزیزان کدی شامل کل آموزش برای شما قرار میدهیم:

 

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

آموزش Bootstrap 4 جلسه بیست و سوم (Custom Forms)

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

 

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


همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید.

اگر این مطلب آموزنده بود به ما امتیاز دهید
1 ستاره2 ستاره3 ستاره4 ستاره5 ستاره (2 رای, میانگین: 4٫50 امتیاز از 5)
Loading...

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

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

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

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

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

*

code

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