ستروکیت

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

(carousel) یک نوع اسلایدر در بوت استرپ است که برای حرکت بین مجموعه‌ای از محتوا مورد استفاده قرار می‌گیرد و به وسیله مشخصه 3D transform در CSS و کمی جاوا اسکریپت ساخته می شود و می تواند برای مجموعه ای از تصاویر، متن و هر محتوای سفارشی استفاده شود.

در مرورگرهایی که از Page Visibiliy API پشتیبانی می کنند، این اسلایدر در مواقعی که صفحه وب برای کاربر قابل مشاهده نیست مانند زمانی که تب‌های مرورگر غیر فعال است و یا زمانی که پنجره مرورگر در حالت minimize است و موارد مشابه دیگر، از حرکت بین اسلایدها جلوگیری می‌کند.

اسلایدر (carousel) به طور خودکار نمی‌تواند ابعاد اسلاید را با اندازه مرورگر تطبیق دهد به این ترتیب، ممکن است لازم باشد از برنامه‌های کاربردی اضافی و یا استایل‌های سفارشی برای اعمال اندازه به محتوا استفاده کنید. همچنین امکان اضافه شدن دکمه های کنترلی (قبلی) و (بعدی) برای جابجایی بین اسلایدها و همچنین indicator برای اسلایدر carousel وجود دارد. اگرچه الزامی در استفاده از آنها وجود ندارد.

وجود کلاس .active و اضافه شدن آن به اسلایدها ضروری است، در غیر این صورت اسلایدر قابل مشاهده نیست. از موارد الزامی دیگر که باید از وجود آن اطمینان حاصل کنید، استفاده از "id = ".carousel برای کنترل بخش‌های مختلف اسلایدر است به ویژه زمانی که از چندین اسلایدر در یک صفحه استفاده می‌کنید. کنترلرها و ایندیکیتورها نیز باید دارای مشخصه data-target هماهنگ با "id = ".carousel باشد.

اضافه کردن تگ های مربوط به اسلایدها:

ابتدایی‌ترین کدها برای اضافه کردن اسلایدر استفاده از کدهای زیر است. توجه داشته باشید که نمایش کلاسهای d-block. و w-100. به تصاویر اسلایدر، از اعمال استایل‌های پیشفرض مرورگر جلوگیری می‌کند.

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
 <div class="carousel-inner">
  <div class="carousel-item active">
   <img src="..." class="d-block w-100" alt="...">
  </div>
  <div class="carousel-item">
   <img src="..." class="d-block w-100" alt="...">
  </div>
  <div class="carousel-item">
   <img src="..." class="d-block w-100" alt="...">
  </div>
 </div>
</div>

به منظور اضافه کردن دکمه‌های کنترلی  می‌توانید در ادامه کدهای بالا کدهای مربوط به دکمه های کنترلی را اضافه کنید:

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
 <div class="carousel-inner">
 ...
 </div>
 <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  <span class="sr-only">Previous</span>
 </a>
 <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
 </a>
</div>

و برای اضافه شدن indicator از کدهای زیر استفاده کنید:

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
 <ol class="carousel-indicators">
  <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
  <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
  <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
 </ol>
 <div class="carousel-inner">
 ...
 </div>
</div>

استفاده از کپشن یا توضیحات برای اسلایدها:

برای اضافه شدن کپشن به اسلایدها به سادگی می‌توانید از عناصر دارای کلاس carousel-caption. همانطور که در کدهای زیر آمده است، درون carousel-item. استفاده کنید.

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
 <div class="carousel-inner">
  <div class="carousel-item active">
   <img src="..." class="d-block w-100" alt="...">
   <div class="carousel-caption d-none d-md-block">
    <h5>First slide label</h5>
    <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
   </div>
  </div>
 ...
 </div>
</div>

تغییر حالت نمایش اسلایدها و استفاده از افکت Crossfade

بدین منظور از کلاس carousel-fade. استفاده کنید که باعث تغییر حرکت نمایش اسلایدها میشود.

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
  ...
</div>

تغییر مدت زمان نمایش اسلایدها

برای تغییر مدت زمان نمایش اسلایدها از کلاس " "=data-interval برای carousel-item. به شکل زیر استفاده کنید.

<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
 <div class="carousel-inner">
  <div class="carousel-item active" data-interval="10000">
   <img src="..." class="d-block w-100" alt="...">
  </div>
  <div class="carousel-item" data-interval="2000">
   <img src="..." class="d-block w-100" alt="...">
  </div>
  <div class="carousel-item">
   <img src="..." class="d-block w-100" alt="...">
  </div>
 </div>
</div>

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

با استفاده از مشخصه‌های data می‌توانید به راحتی موقعیت اسلایدر را کنترل کنید. استفاده از کلمات کلیدی prev و next در data-slide. می‌تواند موقعیت اسلایدها را نسبت به وضعیت فعلی‌شان تغییر دهد. همچنین استفاده از data-slide-to امکان جابجایی اسلایدها نسبت به ایندکس‌شان را فراهم می‌کند.

برای ایجاد تغییرات بیشتر می‌توانید از data attribute ها استفاده کنید. به این شکل که نام option مورد نظر خود را باید به -data اضافه کنید. به عنوان مثال ""=data-interval که از این آپشن می‌توان برای ایجاد تاخیر میان اسلایدها استفاده کرد. که اگر مقدار آن برابر false باشد، چرخه حرکت خودکار اسلایدر متوقف می‌شود.

از آپشن های دیگر می‌توان به keyboard اشاره کرد که برای واکنش نشان دادن اسلایدر به صفحه کلید مورد استفاده قرار می‌گیرد و با قرار دادن مقدار آن روی true، امکان جابجایی اسلایدها با صفحه کلید مهیا می‌شود.