نویسنده پشتیبانی وب یار
امتیاز مطلب
تعداد بازدید 1669
تاریخ بروزرسانی ۳۰ فروردین ۱۴۰۱

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

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

Carousel اسلایدری است که برای نمایش تصاویر، نوشته­ ها، ویدئو و انیمیشن­ های متحرک به کار می رود. پوسته  اصلی اسلایدشو ها تصاویر می باشند. در صفحه تنها می توان از یک Carousel استفاده کرد. برای ساخت اسلایدر حرفه ای با استفاده از بوت استرپ با تیم طراحی سایت اصفهان وب یار همراه باشید.

مثال زیر نشان می دهد که چگونه می توان یک Carousel ساده را با استفاده از کد های Bootstrap ایجاد کرد.

اسلایدشو برای عملکرد مناسب کنترل های خود  نیاز به یک شناسه (در این مورد id=”myCarousel”) دارد.

 

<div> خارجی

در این کد، ” class=”carousel مشخص می کند که این div حاوی Carousel می باشد. کلاس slide افکت های transition و animation را اضافه می کند که باعت ایجاد حالت اسلایدی برای عکس ها در هنگام نمایش آیتم های بعدی می شود. ویژگی data-ride=”carousel” به Bootstrap می گوید که بلافاصله پس از بارگذاری صفحات حرکت انیمیشنی Carousel را شروع می کند.

 

بخش  Indicators 

Indicators ها نقطه های کوچکی در پایین هر اسلاید هستند که نشان می دهد چند آیتم در carousel وجود دارد.

Indicators ها در یک لیست مرتب با کلاس .carousel-indicators مشخص می شوند.

خصوصیت data-target به id carousel اشاره می کند.

خصوصیت data-slide-to مشخص می کند که هنگام کلیک کردن بر روی یک دکمه ی خاص باید به کدام اسلاید بروید.

 

بخش  Wrapper for slides 

اسلایدرها در <div> با کلاس carousel-inner مشخص می شوند.

محتویات هر اسلاید در یک <div> با کلاس item تعریف می شوند . این محتویات شامل متن و عکس می باشد.

کلاس active باید به یکی از اسلایدرها اضافه شود؛ در غیر این صورت-carousel قابل مشاهده نخواهد بود.

 

بخش Left and right controls 

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

خصوصیت data-slide کلمات کلیدی “prev”یا  “next” را می پذیرد و موقعیت اسلاید را بر اساس شرایط کنونی اش تغییر می دهد.

 

اضافه کردن متن به اسلایدر ها

برای این که برای هر اسلاید یک عنوان و متن داشته باشید باید از کد <“div class=”carousel-caption> را به هر <“div class=”item> اضافه کنید.

کد های زیر یک نمونه اسلاید شو را به همراه Caption نشان می دهد:

آموزش Carousel در Bootstrap

این مقاله درباره آموزش Carousel در Bootstrap بود. در نهایت پس از تشکر از همراهی شما عزیزان لازم به ذکر است اگر برای ایجاد یک اسلایدشو در Bootstrap یا دیگر موضوعات آن دچار مشکل شدید می توانید سوالات خود را با ما در میان بگذارید. برای دریافت آموزش های بیشتر می توانید به کانال وب یار (webyar_net@) مراجعه کنید.

 

مقالات مرتبط

نشانی ایمیل شما منتشر نخواهد شد.