{% layout 'layout' %}
{% block title %}Carousel{% endblock %}

{% block breadcrumb %}
<li><a href="index.html">Home</a></li>
<li><a href="#">UI Components</a></li>
<li class="active"><a href="ui-carousel.html">Carousel</a></li>
{% endblock %}

{% block styles %}
{% endblock %}

{% block scripts %}
{% endblock %}

{% block content %}

<div class="row">
	<div class="col-md-6">
		<div class="carousel carousel-text slide carousel-default mb20" id="c-slide">
			<ol class="carousel-indicators">
				<li data-target="#c-slide" data-slide-to="0" class="active"></li>
				<li data-target="#c-slide" data-slide-to="1" class=""></li>
				<li data-target="#c-slide" data-slide-to="2" class=""></li>
			</ol>
			<div class="carousel-inner">
				<div class="item active">
					<p class="text-center">
						<em class="h4">Save your time</em><br> <small class="text-muted">Many components</small> 
					</p>
				</div>
				<div class="item">
					<p class="text-center">
						<em class="h4">Nice and easy to use</em><br> <small class="text-muted">Full documents</small>
					</p>
				</div>
				<div class="item">
					<p class="text-center">
						<em class="h4">Mobile header first</em><br> <small class="text-muted">Mobile/Tablet/Desktop</small> 
					</p>
				</div>
			</div>

			<!-- Indicators -->
			<a class="left carousel-control" href="#c-slide" data-slide="prev">
				<i class="fa fa-angle-left icon-prev"></i>
			</a>
			<a class="right carousel-control" href="#c-slide" data-slide="next">
				<i class="fa fa-angle-right icon-next"></i>
			</a> 
		</div>
	</div>

	<div class="col-md-6">
		<div class="carousel carousel-text slide carousel-inverse mb20" id="c-slide2">
			<ol class="carousel-indicators">
				<li data-target="#c-slide2" data-slide-to="0" class="active"></li>
				<li data-target="#c-slide2" data-slide-to="1" class=""></li>
				<li data-target="#c-slide2" data-slide-to="2" class=""></li>
			</ol>
			<div class="carousel-inner">
				<div class="item active">
					<p class="text-center">
						<em class="h4">Save your time</em><br> <small class="text-muted">Many components</small> 
					</p>
				</div>
				<div class="item">
					<p class="text-center">
						<em class="h4">Nice and easy to use</em><br> <small class="text-muted">Full documents</small>
					</p>
				</div>
				<div class="item">
					<p class="text-center">
						<em class="h4">Mobile header first</em><br> <small class="text-muted">Mobile/Tablet/Desktop</small> 
					</p>
				</div>
			</div>

			<!-- Indicators -->
			<a class="left carousel-control" href="#c-slide2" data-slide="prev">
				<i class="fa fa-angle-left icon-prev"></i>
			</a>
			<a class="right carousel-control" href="#c-slide2" data-slide="next">
				<i class="fa fa-angle-right icon-next"></i>
			</a> 
		</div>
	</div>

</div>


<div class="row">
	<div class="col-md-12">
		<div class="panel panel-info">
			<div class="panel-heading"><h2>Carousel</h2></div>
			<div class="panel-body">
				<p class="mb20">The slideshow below shows an example of a simple carousel plugin which you can use to cycle through elements at regular intervals</p>

				<div id="carousel-example-captions" class="carousel slide">
					<ol class="carousel-indicators">
						<li data-target="#carousel-example-captions" data-slide-to="0" class=""></li>
						<li data-target="#carousel-example-captions" data-slide-to="1" class=""></li>
						<li data-target="#carousel-example-captions" data-slide-to="2" class="active"></li>
					</ol>
					<div class="carousel-inner">
						<div class="item">
							<img src="{{'demo/stockphoto/blog_06.jpg' | asset_url | img_loc }}" alt="Demolition">
							<div class="carousel-caption">
								<h3>First slide label</h3>
								<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
							</div>
						</div>
						<div class="item">
							<img src="{{'demo/stockphoto/blog_04.jpg' | asset_url | img_loc }}" alt="River">
							<div class="carousel-caption">
								<h3>Second slide label</h3>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
							</div>
						</div>
						<div class="item active">
							<img src="{{'demo/stockphoto/blog_08.jpg' | asset_url | img_loc }}" alt="Fountain">
							<div class="carousel-caption">
								<h3>Third slide label</h3>
								<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
							</div>
						</div>
					</div>
					<a class="left carousel-control" href="#carousel-example-captions" data-slide="prev">
						<i class="fa fa-prev icon-prev"></i>
					</a>
					<a class="right carousel-control" href="#carousel-example-captions" data-slide="next">
						<i class="fa fa-next icon-next"></i>
					</a>
				</div>

			</div>
		</div>
	</div>
</div>

{% endblock %}
