در این جلسه از دوره آموزش بوت استرپ به بررسیپلاگین CAROUSELدر بوت استرپ می پردازیم.
پلاگین CAROUSEL در بوت استرپ :
پلاگین carousel برای ایجاد کامپوننت های حلقه ای در بین عناصر کاربرد دارد.قطعا هنگامی که وب گردی کرده اید با اسلایدر هایی روبرو شده اید که ازحلقه های دایره ای برای نمایش تغییر تصور اسلایدر استفاده کرده اند این کار را می توان با پلاگین carousel در بوت استرپ انجام داد.
چگونه با استفاده از پلاگین Carousel یک اسلایدر ایجاد کنیم :
- در مرحله اول باید پلاگین carousel را به بوت استرپ اضافه کرد.
برای اضافه کردن پلاگین ها در بوت استرپ به دو روش می توانید عمل کنید:
- پلاگین ها را به صورت جداگانه می توانید به بوت استرپ اضافه نمایید.برای استفاده از فایل جداگانه بوت استرپ از کلاس carousel.js استفاده کنید.
- پلاگین ها را می توانید به صورت یک جا با استفاده از کلاس های bootstrap.min.js یا bootstrap.js اضافه نمایید.
بیشتر از روش دوم استفاده می شود.
بعد از این که پلاگین را به بوت استرپ اضافه کردید کد های زیر را در ویرایشگر خود وارد کنید.
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="la.jpg" alt="Los Angeles">
</div>
<div class="item">
<img src="chicago.jpg" alt="Chicago">
</div>
<div class="item">
<img src="ny.jpg" alt="New York">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
توضیح مثال :
بعد از اضافه کردن پلاگین carousel به بوت استرپ طبق مراحل زیر پیش رفته ایم:
ایجاد بیرونی ترین لایه (div) : با پارامترهای آی دی , کلاس , data-ride که به شکل زیر مقدار دهی می شوند :
.این آی دی باعث عملکرد درست اسلایدر می شود : id=”myCarousel”
. این کلاس مشخص می کند که این لایه حاوی یک اسلایدر می باشد : class=”carousel slide”
. این کلاس به بوت استرپ می گوید بلافاصله بعد از بارگذاری صفحه حرکت انیمیشنی پلاگین کروسل شروع شود : data-ride=”carousel”
بخش INDICATOR ها در بوت استرپ :
در این بخش به کاربر نمایش داده می شود که چه تعدادعکس در اسلایدر وجود دارد.این کار با استفاده از دایره های کوچک که در پایین اسلایدر قرار دارند انجام می شود.
روش انجام کار به شکل زیر است.
- کلاس “class=”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 id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="la.jpg" alt="Chania">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>LA is always so much fun!</p>
</div>
</div>
<div class="item">
<img src="chicago.jpg" alt="Chicago">
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago!</p>
</div>
</div>
<div class="item">
<img src="ny.jpg" alt="New York">
<div class="carousel-caption">
<h3>New York</h3>
<p>We love the Big Apple!</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
){kind=link}