یک اسلاید و یا carousel در بوت استرپ یک اسلاید شو برای نمایش دو یا چند عکس پشت سر هم و تکرار وار است. بسیار پیش امده است که در وب سایت هایی که در روزمره مشاهده میکیم یک اسلاید شو برای نمایش عکس ها موجود در سایت وجود دارد برای این منظور باید مراحل زیر طی شود :
در مرحله اول ابتدا باید یک div ایجاد شود و به آن یک id میدهیم سپس در آن کلاس carousel slid را اعمال میکنیم و سپس یک" data-ride = "carousel ایجاد میکنیم که به بوت استرپ این منظور را میرساند که آن دستورات را اجرا کند :
<div id="slideshow" class="carousel slide" data-ride="carousel">
حال باید یک ul ایجاد کنیم و در li های آن شماره اسلاید ها را قرار میدهیم باید توجه داشت اسلاید اول شماره 0 را به خود میگیرد و باید حتما کلاس active. در آن اعمال شود :
<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="picture1.jpg" alt="pic1">
</div>
<div class="carousel-item">
<img src="picture2.jpg" alt="pic2">
</div>
<div class="carousel-item">
<img src="picture3.jpg" alt="pic3">
</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>
به صورت کلی کد به صورت زیر است :
بیشتر بخوانید : kimialearning.ir
