The carousel is a slideshow for cycling through a series of content, built with css 3d transforms and a bit of javascript.
A basic carousel with previous and next control.
Source Code
<div id="carousel1" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="../img/img13.jpg" alt="First slide">
</div>
<div class="carousel-item">...</div>
<div class="carousel-item">...</div>
</div><!-- carousel-inner -->
<a class="carousel-control-prev" href="#carousel1" 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="#carousel1" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- carousel -->A basic carousel with different control positions.
Source Code
<div id="carousel1" class="carousel slide control-top-left" data-ride="carousel"> ... </div>Class Reference
| Class | Position |
|---|---|
class="carousel slide control-[position]" |
top-left | top-right | bottom-left | bottom-right |
A basic carousel with dot indicator at the center bottom of slide.
Source Code
<div id="carousel6" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel6" data-slide-to="0" class="active"></li>
<li data-target="#carousel6" data-slide-to="1"></li>
<li data-target="#carousel6" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
...
</div><!-- carousel-inner -->
</div><!-- carousel -->Six different position to choose from when positioning the indicator of a slide.
Source Code
<ol class="carousel-indicators indicators-top-center">...</ol>Class Reference
| Class | Position |
|---|---|
class="carousel-indicators indicators-[position]" |
top-center | top-left | top-right | bottom-left | bottom-right |
The control and indicators cannot be in the same position as they are overlapping each other, unless if you know how to customize it. If you really want them both have on the same position but don't know how to do it, you can always ask us for customization.
An alternative to image using content instead of sliding an image.
Source Code
<div id="carousel12" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel12" data-slide-to="0" class="active"></li>
<li data-target="#carousel12" data-slide-to="1"></li>
<li data-target="#carousel12" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="bg-primary pd-30 ht-300 d-flex align-items-center">
<div class="tx-white">
<p class="tx-uppercase tx-11 tx-spacing-2">Recent Article</p>
<h5 class="lh-5 mg-b-20">20 Best Travel Tips After 5 Years Of Traveling The World</h5>
<nav class="nav flex-row tx-13">
<a href="" class="tx-white-8 hover-white pd-l-0 pd-r-5">Edit</a>
<a href="" class="tx-white-8 hover-white pd-x-5">Unpublish</a>
<a href="" class="tx-white-8 hover-white pd-x-5">Delete</a>
</nav>
</div>
</div><!-- d-flex -->
</div><!-- carousel-item -->
<div class="carousel-item">...</div>
<div class="carousel-item">...</div>
</div><!-- carousel-inner -->
</div><!-- carousel -->