Slides only
<div id="carouselExampleSlidesOnly"class="carousel slide"data-ride="carousel"><div class="carousel-inner"><div class="carousel-item active"><img src="assets/images/small/img-1.jpg"class="d-block w-100"alt="#"></div><div class="carousel-item"><img src="assets/images/small/img-1.jpg"class="d-block w-100"alt="#"></div><div class="carousel-item"><img src="assets/images/small/img-1.jpg"class="d-block w-100"alt="#"></div></div></div>
Here’s a carousel with slides only. Note the presence of the .d-blockand .img-fluidon carousel images to prevent browser default image alignment.
Slides With Controls
<div id="carouselExampleControls"class="carousel slide"data-ride="carousel"><div class="carousel-inner"><div class="carousel-item active"><img src="assets/images/small/img-1.jpg"class="d-block w-100"alt="#"></div><div class="carousel-item"><img src="assets/images/small/img-1.jpg"class="d-block w-100"alt="#"></div><div class="carousel-item"><img src="assets/images/small/img-1.jpg"class="d-block w-100"alt="#"></div></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>
Here’s a carousel with slides only. Note the presence of the .d-blockand .img-fluidon carousel images to prevent browser default image alignment.
Slides With Indicators
<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 src="assets/images/small/img-1.jpg"class="d-block w-100"alt="#"></div><div class="carousel-item"><img src="assets/images/small/img-1.jpg"class="d-block w-100"alt="#"></div><div class="carousel-item"><img src="assets/images/small/img-1.jpg"class="d-block w-100"alt="#"></div></div><a class="carousel-control-prev"href="#carouselExampleIndicators"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="#carouselExampleIndicators"role="button"data-slide="next"><span class="carousel-control-next-icon"aria-hidden="true"></span><span class="sr-only">Next</span></a></div>
Here’s a carousel with slides only. Note the presence of the .d-blockand .img-fluidon carousel images to prevent browser default image alignment.
Slides With Captions
<div id="carouselExampleCaptions"class="carousel slide"data-ride="carousel"><ol class="carousel-indicators"><li data-target="#carouselExampleCaptions"data-slide-to="0"class="active"></li><li data-target="#carouselExampleCaptions"data-slide-to="1"></li><li data-target="#carouselExampleCaptions"data-slide-to="2"></li></ol><div class="carousel-inner"><div class="carousel-item active"><img src="assets/images/small/img-1.jpg"class="d-block w-100"alt="#"><div class="carousel-caption d-none d-md-block"><h4 class="text-white">First slide label</h4><p>Nulla vitae elit libero,a pharetra augue mollis interdum.</p></div></div><div class="carousel-item"><img src="assets/images/small/img-1.jpg"class="d-block w-100"alt="#"><div class="carousel-caption d-none d-md-block"><h4 class="text-white">Second slide label</h4><p>Lorem ipsum dolor sit amet,consectetur adipiscing elit.</p></div></div><div class="carousel-item"><img src="assets/images/small/img-1.jpg"class="d-block w-100"alt="#"><div class="carousel-caption d-none d-md-block"><h4 class="text-white">Third slide label</h4><p>Praesent commodo cursus magna,vel scelerisque nisl consectetur.</p></div></div></div><a class="carousel-control-prev"href="#carouselExampleCaptions"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="#carouselExampleCaptions"role="button"data-slide="next"><span class="carousel-control-next-icon"aria-hidden="true"></span><span class="sr-only">Next</span></a></div>x3E;</div><a class="carousel-control-prev"href="#carouselExampleCaptions"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="#carouselExampleCaptions"role="button"data-slide="next"><span class="carousel-control-next-icon"aria-hidden="true"></span><span class="sr-only">Next</span></a></div>
Here’s a carousel with slides only. Note the presence of the .d-blockand .img-fluidon carousel images to prevent browser default image alignment.
Slides With Crossfade
<div id="carouselExampleFade"class="carousel slide carousel-fade"data-ride="carousel"><div class="carousel-inner"><div class="carousel-item active"><img src="assets/images/small/img-1.jpg"class="d-block w-100"alt="#"></div><div class="carousel-item"><img src="assets/images/small/img-1.jpg"class="d-block w-100"alt="#"></div><div class="carousel-item"><img src="assets/images/small/img-1.jpg"class="d-block w-100"alt="#"></div></div><a class="carousel-control-prev"href="#carouselExampleFade"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="#carouselExampleFade"role="button"data-slide="next"><span class="carousel-control-next-icon"aria-hidden="true"></span><span class="sr-only">Next</span></a></div>
Here’s a carousel with slides only. Note the presence of the .d-blockand .img-fluidon carousel images to prevent browser default image alignment.