اسلایدرها (Carousel) در بوت استرپ

بهاره حسنیبهاره حسنی
296 بازدید
[cdb_box_content css=”.vc_custom_1572354315897{background-color: #1e73be !important;}”]

Carousel یک اسلایدر به صورت چرخشی برای عناصر است.

در بوت استرپ از کلاس های آماده برای Carousel ها میتوانید استفاده کنید.

نحوه افزودن کپشن به اسلایدرها در بوت استرپ را خواهید آموخت.

[/cdb_box_content]

با عرض سلام و وقت بخیر خدمت شما همراهان عزیز سایت پرنیان طرح

در این مبحث با آموزش بخش Carousel همراه شما هستیم.

چگونه یک Carousel ایجاد کنیم ؟

مثال زیر نحوه ی ایجاد یک carousel اساسی با نشانگرها و کنترل ها را نشان میدهد.

مثال :

[php]

<div id=”demo” class=”carousel slide” data-ride=”carousel”>

<!– Indicators –>
<ul class=”carousel-indicators”>
<li data-target=”#demo” data-slide-to=”0″ class=”active”></li>
<li data-target=”#demo” data-slide-to=”1″></li>
<li data-target=”#demo” data-slide-to=”2″></li>
</ul>

<!– The slideshow –>
<div class=”carousel-inner”>
<div class=”carousel-item active”>
<img src=”la.jpg” alt=”Los Angeles” width=”1100″ height=”500″>
</div>
<div class=”carousel-item”>
<img src=”chicago.jpg” alt=”Chicago” width=”1100″ height=”500″>
</div>
<div class=”carousel-item”>
<img src=”ny.jpg” alt=”New York” width=”1100″ height=”500″>
</div>
</div>

<!– Left and right controls –>
<a class=”carousel-control-prev” href=”#demo” data-slide=”prev”>
<span class=”carousel-control-prev-icon”></span>
</a>
<a class=”carousel-control-next” href=”#demo” data-slide=”next”>
<span class=”carousel-control-next-icon”></span>
</a>
</div>

[/php]

با کلیک روی فلش ها میتوانید اسلایدر ها را ببینید:

اسلایدر

slider

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

شرح کارهایی که هر کلاس از مثال فوق انجام میدهد:

  • carousel : carousel ایجاد میکند.
  • carousel-indicators : شاخص های carousel را ایجاد میکند که تعداد اسلایدرها را مشخص میکند و کدام اسلایدر در حال مشاهده کاربر است.
  • carousel-inner : اسلاید ها را به carousel اضافه میکند.
  • carousel-item : محتوای هر اسلاید را مشخص میکند.
  • carousel-control-prev : دکمه ی سمت چپ را به اسلاید ها اضافه میکند که به کاربر امکان میدهد بین اسلاید ها برگردد.
  • carousel-control-next : دکمه سمت راست را به اسلاید ها اضافه میکند که به کاربر امکان میدهد به اسلاید بعدی برود.
  • carousel-control-prev-icon : برای ایجاد آیکون دکمه ی قبلی استفاده میشود.
  • carousel-control-next-icon : برای ایجادٖ آیکون دکمه ی بعدی استفاده میشود.
  • slide : یک افکت انیمیشن css را به آیتم ها اضافه میکند هنگامی که میخواهید از یک مورد به مورد بعدی بروید.

افزودن زیرنویس به اسلاید ها :

المان ها را داخل عنصر div با کلاس carousel-caption. همراه با هر کلاس carousel-item. اضافه کنید تا کپشن را  برای هر اسلاید ایجاد کنید.

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

[php]

<div id=”demo” class=”carousel slide” data-ride=”carousel”>
<ul class=”carousel-indicators”>
<li data-target=”#demo” data-slide-to=”0″ class=”active”></li>
<li data-target=”#demo” data-slide-to=”1″></li>
<li data-target=”#demo” data-slide-to=”2″></li>
</ul>
<div class=”carousel-inner”>
<div class=”carousel-item active”>
<img src=”la.jpg” alt=”Los Angeles” width=”1100″ height=”500″>
<div class=”carousel-caption”>
<h3>Los Angeles</h3>
<p>We had such a great time in LA!</p>
</div>
</div>
<div class=”carousel-item”>
<img src=”chicago.jpg” alt=”Chicago” width=”1100″ height=”500″>
<div class=”carousel-caption”>
<h3>Chicago</h3>
<p>Thank you, Chicago!</p>
</div>
</div>
<div class=”carousel-item”>
<img src=”ny.jpg” alt=”New York” width=”1100″ height=”500″>
<div class=”carousel-caption”>
<h3>New York</h3>
<p>We love the Big Apple!</p>
</div>
</div>
</div>
<a class=”carousel-control-prev” href=”#demo” data-slide=”prev”>
<span class=”carousel-control-prev-icon”></span>
</a>
<a class=”carousel-control-next” href=”#demo” data-slide=”next”>
<span class=”carousel-control-next-icon”></span>
</a>
</div>

[/php]

کپشن ها داخل هر اسلاید نشان داده میشوند :

کپشن ها

captions

دسته بندی آموزش bootstrap
اشتراک گذاری

نوشته های مرتبط

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

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

23+ محصولات
405+ سفارشات تکمیل شده
2098+ کاربران
399+ مطالب وبلاگ
سبد خرید

هیچ محصولی در سبد خرید نیست.

ورود به سایت