Basic Carousel
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active"><img class="d-block w-100" src="..." alt="..."></div>
<div class="carousel-item"><img class="d-block w-100" src="..." alt="..."></div>
<div class="carousel-item"><img class="d-block w-100" src="..." alt="..."></div>
</div>
</div>
Carousel Controls
<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 class="carousel-item active"><img class="d-block w-100" src="..." alt="..."></div>
<div class="carousel-item"><img class="d-block w-100" src="..." alt="..."></div>
<div class="carousel-item"><img class="d-block w-100" src="..." alt="..."></div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<i class="ion-ios-arrow-back" aria-hidden="true"></i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<i class="ion-ios-arrow-forward" aria-hidden="true"></i>
<span class="sr-only">Next</span>
</a>
</div>
Bottom To Top
First slide title
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Second slide title
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Third slide title
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<div id="carouselExampleVertical" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleVertical" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleVertical" data-slide-to="1"></li>
<li data-target="#carouselExampleVertical" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="...">
<div class="carousel-caption">
<h5>First slide title</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="...">
<div class="carousel-caption">
<h5>Second slide title</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="...">
<div class="carousel-caption">
<h5>Third slide title</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
</div>
</div>
Arrow Controls
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active"><img class="d-block w-100" src="..." alt="..."></div>
<div class="carousel-item"><img class="d-block w-100" src="..." alt="..."></div>
<div class="carousel-item"><img class="d-block w-100" src="..." alt="..."></div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<i class="ion-ios-arrow-back" aria-hidden="true"></i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<i class="ion-ios-arrow-forward" aria-hidden="true"></i>
<span class="sr-only">Next</span>
</a>
</div>
Carousel Content
First slide title
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Second slide title
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Third slide title
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<div id="carouselExampleContent" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleContent" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleContent" data-slide-to="1"></li>
<li data-target="#carouselExampleContent" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="...">
<div class="carousel-caption">
<h5>First slide title</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="...">
<div class="carousel-caption">
<h5>Second slide title</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="...">
<div class="carousel-caption">
<h5>Third slide title</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleContent" role="button" data-slide="prev">
<i class="ion-ios-arrow-back" aria-hidden="true"></i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleContent" role="button" data-slide="next">
<i class="ion-ios-arrow-forward" aria-hidden="true"></i>
<span class="sr-only">Next</span>
</a>
</div>
Bottom To Top Arrow
<div id="carouselExampleVerticalControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active"><img class="d-block w-100" src="..." alt="..."></div>
<div class="carousel-item"><img class="d-block w-100" src="..." alt="..."></div>
<div class="carousel-item"><img class="d-block w-100" src="..." alt="..."></div>
</div>
<a class="carousel-control-prev" href="#carouselExampleVerticalControls" role="button" data-slide="prev">
<i class="ion-ios-arrow-up" aria-hidden="true"></i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleVerticalControls" role="button" data-slide="next">
<i class="ion-ios-arrow-down" aria-hidden="true"></i>
<span class="sr-only">Next</span>
</a>
</div>