آموزش Carousel در Bootstrap


برای خواندن کامل مطلب به سایت سر بزنید . آنجا کد ها و تصوایر کاملا خوانا ترند !
https://www.spadan.net/

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

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

<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="http://www.spadan.net/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>

اسلایدشو برای عملکرد مناسب کنترل های خود  نیاز به یک شناسه (در این مورد 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 نشان می دهد.

<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="http://www.spadan.net/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>

آموزش Carousel در Bootstrap

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

نوشته آموزش Carousel در Bootstrap اولین بار در طراحی سایت اصفهان | سئو سایت اصفهان پدیدار شد.



Source link

دیدگاهتان را بنویسید

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

*
*

..................................................................................طراحی وب سایت , سئو وب سایت , طراحی قالب وردپرس , فروش بک لینک , فروش رپورتاژ.................................................................................. رد کردن

آفلاین

در حال حاضر نیستیم. لطفا پیام خود را ارسال کنید, در اولین فرصت رسیدگی میکنیم. با تشکر : تیم پشتیبانی اسپادان

هر سولی دارید بپرسید.

شروع چت