tabler/preview/pages/carousel.html

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

<div class="row row-cards">
   <div class="col-md-6">
      {% include "cards/carousel.html" id="default" %}
   </div>
   <div class="col-md-6">
      {% include "cards/carousel.html" id="indicators" title="Carousel with indicators" indicators=true offset=5 %}
   </div>
   <div class="col-md-6">
      {% include "cards/carousel.html" id="controls" title="Carousel with controls" controls=true offset=10 %}
   </div>
	<div class="col-md-6">
		{% include "cards/carousel.html" id="captions" title="Carousel with captions" captions=true controls=true offset=15 %}
	</div>
	<div class="col-md-6">
		{% include "cards/carousel.html" id="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="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="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="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>