---
title: Carousel
page-header: Carousel
layout: default
menu: base.carousel
---

<div class="row row-cards">
   <div class="col-md-6">
      {% include cards/carousel.html id="carousel-default" %}
   </div>
   <div class="col-md-6">
      {% include cards/carousel.html id="carousel-indicators" title="Carousel with indicators" indicators=true offset=5 %}
   </div>
   <div class="col-md-6">
      {% include cards/carousel.html id="carousel-controls" title="Carousel with controls" controls=true offset=10 %}
   </div>
	<div class="col-md-6">
		{% include cards/carousel.html id="carousel-captions" title="Carousel with captions" captions=true controls=true offset=15 %}
	</div>
	<div class="col-md-6">
		{% include cards/carousel.html id="carousel-indicators-dot" title="Carousel with dot indicators" indicators=true indicators-dot=true offset=20 fade=true %}
	</div>
	<div class="col-md-6">
		{% include cards/carousel.html id="carousel-indicators-thumb" title="Carousel with thumbnail indicators" indicators=true indicators-thumb=true indicators-thumb-ratio=true offset=25 fade=true %}
	</div>
	<div class="col-md-6">
		{% include cards/carousel.html id="carousel-indicators-dot-vertical" title="Carousel with vertical dot indicators" indicators=true indicators-vertical=true indicators-dot=true offset=30 fade=true %}
	</div>
	<div class="col-md-6">
		{% include cards/carousel.html id="carousel-indicators-thumb-vertical" title="Carousel with thumbnail indicators" indicators=true indicators-vertical=true indicators-thumb=true indicators-thumb-ratio=true offset=22 fade=true %}
	</div>
</div>