آموزش کار با پلاگین Carousel جهت ساخت اسلایدر در بوت استرپReviewed by صابر بوستانی on Aug 23Rating: 5.0
آموزش کار با پلاگین Carousel جهت ساخت اسلایدر

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

سلام. در ادامه مطالب آموزشی بوت استرپ توی این مطلب آموزش کار با پلاگین Carousel جهت ساخت اسلایدر در بوت استرپ رو خدمت دوستان ارائه می نماییم. پلاگین Carousel یک کامپوننت برای ایجاد حلقه بر روی عنصرهامی باشد، مانند یک اسلایدشو. لطفا در ادامه مطلب با ما همراه باشید…

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

پلاگین Carousel یک کامپوننت برای ایجاد یک حلقه مانند Carousel در بین عناصر است. (اسلاید شو)

نکته : پلاگین ها را میتوان به صورت جداگانه اضافه کرد. ( برای استفاده از فایل جداگانه بوت استرپ از کلاس carousel.js استفاده کنید.) و یا به صورت یکجا (از کلاس های bootstrap.min.js یا bootstrap.js استفاده نمایید.)

1

 

طریقه ساخت یک اسلایدشو با Carousel

مثال زیر نحوه ساخت یک Carousel را به شما نشان میدهد :

جهت مشاهده مثال این تمرین کلیک نمایید

توضیح مثال بالا :

بیرونی ترین و خارجی ترین عنصر <div> :

برای ساخت کروسل ها نیازمند استفاده از یک Id  برای کنترل درست تنظیمات هستیم ( در این مورد id=”myCarousel” )

کلاس class=”carousel” وجود یک کروسل را در عنصر <div> نشان می دهد. کلاس .slide یک انتقال CSS و افکت انیمیشنی اضافه میکند که باعث حالت اسلایدی گرفتن عکسا هنگام نشان دادن ایتم های بعدی میشود. اگر افکت اسلاید را نمیخواهید از این بخش صرف نظرکنید.

خاصیت data-ride=”carousel” باعث شروع حرکت انیمیشنی کروسل بلافاصله به هنگام لود شدن صفحه میشود.

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

 

بخش Indicator ها در بوت استرپ

Indicator ها همان دایره ها/نقطه های کوچک پایین صفحه هستند که نشان میدهند چند اسلاید دیگر در کروسل وجود دارد و در حال حاضر در کدام اسلاید هستیم.

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

کلاس data-target به Id کروسل اشاره میکند.

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

 

بخش Wrapper for slides

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

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

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

 

بخش Left and rigt controls

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

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

 

اضافه کردن کپشن به اسلاید ها

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

جهت مشاهده مثال این تمرین کلیک نمایید

برای تازه شدن دیر نیست

موفق و پیروز باشید