• 
• 
• 
• 

<section class="carousel">

	<ul class="min">
		<li><a href="#img1"><img src="../assets/img/adrian-infernus-281832-500.jpg"></a></li>
		<li><a href="#img2"><img src="../assets/img/ales-krivec-107499-500.jpg"></a></li>
		<li><a href="#img3"><img src="../assets/img/christian-joudrey-96208-500.jpg"></a></li>
		<li><a href="#img4"><img src="../assets/img/david-klaasen-54203-500.jpg"></a></li>
	</ul>

	<div class="picture" id="img1">
		<figure>
			<a href="#img1" class="btn-prev"></a>
			<a href="#card-carousel" class="btn-close"></a>
			<a href="#img3" class="btn-next"></a>
			<img src="../assets/img/adrian-infernus-281832-500.jpg">
		</figure>
	</div>

	<div class="picture" id="img2">
		<figure>
			<a href="#img4" class="btn-prev"></a>
			<a href="#card-carousel" class="btn-close"></a>
			<a href="#img2" class="btn-next"></a>
			<img src="../assets/img/ales-krivec-107499-500.jpg">
		</figure>
	</div>

	<div class="picture" id="img3">
		<figure>
			<a href="#img2" class="btn-prev"></a>
			<a href="#card-carousel" class="btn-close"></a>
			<a href="#img4" class="btn-next"></a>
			<img src="../assets/img/christian-joudrey-96208-500.jpg">
		</figure>
	</div>

	<div class="picture" id="img4">
		<figure>
			<a href="#img3" class="btn-prev"></a>
			<a href="#card-carousel" class="btn-close"></a>
			<a href="#img1" class="btn-next"></a>
			<img src="../assets/img/david-klaasen-54203-500.jpg">
		</figure>
	</div>

</section>

Lightbox with caption

• 
• 

<section class="carousel">

	<ul class="min">
		<li><a href="#paisagem"><img src="../assets/img/adrian-infernus-281832-500.jpg"></a></li>
		<li><a href="#bird"><img src="../assets/img/david-klaasen-54203-500.jpg"></a></li>
	</ul>

	<div class="picture" id="paisagem">
		<figure>
			<a href="#bird" class="btn-prev"></a>
			<a href="#card-carousel" class="btn-close"></a>
			<a href="#bird" class="btn-next"></a>
			<div class="inner">
				<img src="../assets/img/adrian-infernus-281832-500.jpg">
				<figcaption class="caption">
					<h1>Uma boa Paisagem</h1>
					<div>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur illum repellendus veniam dolorem, maxime nostrum accusantium soluta. Incidunt impedit dolorem odio ex error, laborum accusamus cupiditate distinctio, necessitatibus adipisci, omnis!
					</div>
				</figcaption>
			</div>
		</figure>
	</div>

	<div class="picture" id="bird">
		<figure>
			<a href="#paisagem" class="btn-prev"></a>
			<a href="#card-carousel" class="btn-close"></a>
			<a href="#paisagem" class="btn-next"></a>
			<div class="inner">
				<img src="../assets/img/david-klaasen-54203-500.jpg">
				<figcaption class="caption">
					<h1 class="title">A Good Bird</h1>
					<div class="container">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur illum repellendus veniam dolorem, maxime nostrum accusantium soluta. Incidunt impedit dolorem odio ex error, laborum accusamus cupiditate distinctio, necessitatibus adipisci, omnis!
					</div>
				</figcaption>
			</div>
		</figure>
	</div>

</section>

<div class="materialbox">
	<input type="checkbox" id="trigger">
	<label for="trigger" data-caption="Hello! Material box">
		<img src="../assets/img/adrian-infernus-281832-500.jpg">
	</label>
</div>