{{> widgets/breadcrumb/breadcrumb}}
<div class="card mb-4"> 
	<div class="card-content"> 
		<div class="card-header justify-content-between d-flex"> 
			<h3 class="card-title">{{translation.carousel}}</h3> 
		</div>
		<div class="card-data"> 
			<p class="pb-4">Our Carousel is a robust and versatile component that can be an image slider, to an item carousel, to an onboarding experience. It is touch enabled making it especially smooth to use on mobile.</p>			
		  	<div class="carousel carousel-compact carousel-height">
    			<a class="carousel-item" href="#one!"><img src="/images/blog-1.jpg"></a>
    			<a class="carousel-item" href="#two!"><img src="/images/blog-2.jpg"></a>
    			<a class="carousel-item" href="#three!"><img src="/images/blog-3.jpg"></a>
    			<a class="carousel-item" href="#four!"><img src="/images/blog-4.jpg"></a>
    			<a class="carousel-item" href="#five!"><img src="/images/blog-5.jpg"></a>
  			</div>
		</div>
	</div>
</div>


<div class="card mb-4"> 
	<div class="card-content"> 
		<div class="card-header justify-content-between d-flex"> 
			<h3 class="card-title">{{translation.fullWidthSlider}}</h3> 
		</div>
		<div class="card-data"> 
			<p class="pb-4">Our carousel has a full width option that makes it into a simple and elegant image carousel. You can also have indicators that show up on the bottom of the slider. </p>
			<div class="carousel carousel-slider">
		    	<a class="carousel-item" href="#one!"><img src="/images/blog-1.jpg"></a>
    			<a class="carousel-item" href="#two!"><img src="/images/blog-2.jpg"></a>
    			<a class="carousel-item" href="#three!"><img src="/images/blog-3.jpg"></a>
    			<a class="carousel-item" href="#four!"><img src="/images/blog-4.jpg"></a>
    			<a class="carousel-item" href="#five!"><img src="/images/blog-5.jpg"></a>
		  	</div>			
		</div>
	</div>
</div>

<div class="card mb-4"> 
	<div class="card-content"> 
		<div class="card-header justify-content-between d-flex"> 
			<h3 class="card-title">{{translation.specialOptions}}</h3> 
		</div>
		<div class="card-data"> 
			<p class="pb-4">The carousel doesn't only support images but also allows you to make content carousels. You can add fixed items to your carousel by adding a div with the class carousel-fixed-item and adding your fixed content in there.</p>
		  	<div class="carousel carousel-slider2 center" style="height:400px">
				<div class="carousel-fixed-item center">
					<a class="btn waves-effect white grey-text darken-text-2">button</a>
				</div>
				<div class="carousel-item red white-text" href="#one!">
					<h2 class="white-text">First Panel</h2>
					<p class="white-text">This is your first panel</p>
				</div>
				<div class="carousel-item amber white-text" href="#two!">
					<h2 class="white-text">Second Panel</h2>
					<p class="white-textt">This is your second panel</p>
				</div>
				<div class="carousel-item green white-text" href="#three!">
					<h2 class="white-text">Third Panel</h2>
					<p class="white-text">This is your third panel</p>
				</div>
				<div class="carousel-item blue white-text" href="#four!">
					<h2 class="white-text">Fourth Panel</h2>
					<p class="white-text">This is your fourth panel</p>
				</div>
		  	</div>
		</div>
	</div>
</div>

{{#extend 'scripts'}}
	<script type="text/javascript">
		$(document).ready(function(){
		   $('.carousel-compact').carousel();
		   $('.carousel.carousel-slider').carousel({
		    	fullWidth: true
		  	});
		  	$('.carousel.carousel-slider2').carousel({
		    	fullWidth: true,
		    	indicators: true
		  	});
		});

	</script>
{{/extend}}