مردان وردپرس آموزش بوت استرپ آموزش بوت استرپ ، اسلایدر ( Carousel )
آموزش بوت استرپ ، اسلایدر ( Carousel )

کَروسِل، اسلایدری است که برای عکس، متن و برخی محتواها به کار می رود که با استفاده از CSS و جاوا اسکریپت ساخته شده است.​ دقت داشته باشید که در هر صفحه، فقط یکبار می توان از carousel استفاده کرد. ( در واقع carousel های تو در تو )​ مثال اولیه برای درک بیشتر از اسلایدر بوت استرپ، با صورت زیر است که فقط یک تصویر را نمایش می دهد:

در اینجه، یا آی دی منحصر به فرد را تعریف کرده و با استفاده از کلاس ها .d-block و  .img-fluid، اسلایدر تصاویر را ایجاد میکنیم که در آن کنترلی برای تصاویری قبل و بعد نداریم.

اسلایدر با کنترلرهای قبل و بعد ( Next , Privious )

با استفاده از قطعه کدهای زیر، می توان اسلایدری با ابزار کنترل « قبلی » و « بعدی » تولید نمود:

 

 

در اینجا، با استفاده از کلاس های carousel-control-prev و carousel-control-next می توان برای تصاویر اسلایدر، کنترلر تعیین کرد تا به دلخواه کاربر، تصاویر تغییر کند.

استفاده از متن روی تصاویر اسلایدر ( Caption )

با استفاده از کلاس .carousel-caption درون هر المان .carousel-item می توان متن روی اسلایدر به وجود آورد.​

 

تاریخ آخرین بروزرسانی : ۲۴ آبان ۱۳۹۶
منبع :‌ مردان وردپرس
سجاد رحمانی نژاد

کارشناس طراحی UI وب ، بیش از سه سال سابقه طراحی و کار اجرایی در سازمان های مختلف و به صورت مستقل ( Freelance ) همچنین مدرس دوره های طراحی وب در آموزشگاه های تهران و کرج.

Advertising MiSaCo.

نظرات خود را اینجا بنویسید

آدرس الکترونیکی شما نمایش داده نمی شود *

Time limit is exhausted. Please reload CAPTCHA.