Carousel
Slides Only




<div id="carouselSlidesOnly">
<div>
<div>
<img src="../img/1200x600-success.png" alt="First slide">
</div>
<div>
<img src="../img/1200x600-danger.png" alt="Second slide">
</div>
<div>
<img src="../img/1200x600-warning.png" alt="Third slide">
</div>
<div>
<img src="../img/1200x600-info.png" alt="Fourth slide">
</div>
</div>
</div>
<div id="carouselSlidesOnly">
<div>
<div>
<img src="../img/1200x600-success.png" alt="First slide">
</div>
<div>
<img src="../img/1200x600-danger.png" alt="Second slide">
</div>
<div>
<img src="../img/1200x600-warning.png" alt="Third slide">
</div>
<div>
<img src="../img/1200x600-info.png" alt="Fourth slide">
</div>
</div>
</div>
Controls




<div id="carouselControls">
<div>
<div>
<img src="../img/1200x600-success.png" alt="First slide">
</div>
<div>
<img src="../img/1200x600-danger.png" alt="Second slide">
</div>
<div>
<img src="../img/1200x600-warning.png" alt="Third slide">
</div>
<div>
<img src="../img/1200x600-info.png" alt="Fourth slide">
</div>
</div>
<button>
<span></span>
<span>Previous</span>
</button>
<button>
<span></span>
<span>Next</span>
</button>
</div>
<div id="carouselControls">
<div>
<div>
<img src="../img/1200x600-success.png" alt="First slide">
</div>
<div>
<img src="../img/1200x600-danger.png" alt="Second slide">
</div>
<div>
<img src="../img/1200x600-warning.png" alt="Third slide">
</div>
<div>
<img src="../img/1200x600-info.png" alt="Fourth slide">
</div>
</div>
<button>
<span></span>
<span>Previous</span>
</button>
<button>
<span></span>
<span>Next</span>
</button>
</div>
Indicators




<div id="carouselIndicators">
<div>
<button></button>
<button></button>
<button></button>
<button></button>
</div>
<div>
<div>
<img src="../img/1200x600-success.png" alt="First slide">
</div>
<div>
<img src="../img/1200x600-danger.png" alt="Second slide">
</div>
<div>
<img src="../img/1200x600-warning.png" alt="Third slide">
</div>
<div>
<img src="../img/1200x600-info.png" alt="Fourth slide">
</div>
</div>
</div>
<div id="carouselIndicators">
<div>
<button></button>
<button></button>
<button></button>
<button></button>
</div>
<div>
<div>
<img src="../img/1200x600-success.png" alt="First slide">
</div>
<div>
<img src="../img/1200x600-danger.png" alt="Second slide">
</div>
<div>
<img src="../img/1200x600-warning.png" alt="Third slide">
</div>
<div>
<img src="../img/1200x600-info.png" alt="Fourth slide">
</div>
</div>
</div>
Captions

Caption
This text describes the first slide

Caption
This text describes the second slide

Caption
This text describes the third slide

Caption
This text describes the fourth slide
<div id="carouselCaptions">
<div>
<div>
<img src="../img/1200x600-success.png" alt="First slide">
<div>
<h3>Caption</h3>
<p>This text describes the first slide</p>
</div>
</div>
<div>
<img src="../img/1200x600-danger.png" alt="Second slide">
<div>
<h3>Caption</h3>
<p>This text describes the second slide</p>
</div>
</div>
<div>
<img src="../img/1200x600-warning.png" alt="Third slide">
<div>
<h3>Caption</h3>
<p>This text describes the third slide</p>
</div>
</div>
<div>
<img src="../img/1200x600-info.png" alt="Fourth slide">
<div>
<h3>Caption</h3>
<p>This text describes the fourth slide</p>
</div>
</div>
</div>
</div>
<div id="carouselCaptions">
<div>
<div>
<img src="../img/1200x600-success.png" alt="First slide">
<div>
<h3>Caption</h3>
<p>This text describes the first slide</p>
</div>
</div>
<div>
<img src="../img/1200x600-danger.png" alt="Second slide">
<div>
<h3>Caption</h3>
<p>This text describes the second slide</p>
</div>
</div>
<div>
<img src="../img/1200x600-warning.png" alt="Third slide">
<div>
<h3>Caption</h3>
<p>This text describes the third slide</p>
</div>
</div>
<div>
<img src="../img/1200x600-info.png" alt="Fourth slide">
<div>
<h3>Caption</h3>
<p>This text describes the fourth slide</p>
</div>
</div>
</div>
</div>
Everything
Carousel with controls, indicators and captions

Caption
This text describes the first slide

Caption
This text describes the second slide

Caption
This text describes the third slide

Caption
This text describes the fourth slide
<div id="carouselAll">
<div>
<button></button>
<button></button>
<button></button>
<button></button>
</div>
<div>
<div>
<img src="../img/1200x600-success.png" alt="First slide">
<div>
<h3>Caption</h3>
<p>This text describes the first slide</p>
</div>
</div>
<div>
<img src="../img/1200x600-danger.png" alt="Second slide">
<div>
<h3>Caption</h3>
<p>This text describes the second slide</p>
</div>
</div>
<div>
<img src="../img/1200x600-warning.png" alt="Third slide">
<div>
<h3>Caption</h3>
<p>This text describes the third slide</p>
</div>
</div>
<div>
<img src="../img/1200x600-info.png" alt="Fourth slide">
<div>
<h3>Caption</h3>
<p>This text describes the fourth slide</p>
</div>
</div>
</div>
<button>
<span></span>
<span>Previous</span>
</button>
<button>
<span></span>
<span>Next</span>
</button>
</div>
<div id="carouselAll">
<div>
<button></button>
<button></button>
<button></button>
<button></button>
</div>
<div>
<div>
<img src="../img/1200x600-success.png" alt="First slide">
<div>
<h3>Caption</h3>
<p>This text describes the first slide</p>
</div>
</div>
<div>
<img src="../img/1200x600-danger.png" alt="Second slide">
<div>
<h3>Caption</h3>
<p>This text describes the second slide</p>
</div>
</div>
<div>
<img src="../img/1200x600-warning.png" alt="Third slide">
<div>
<h3>Caption</h3>
<p>This text describes the third slide</p>
</div>
</div>
<div>
<img src="../img/1200x600-info.png" alt="Fourth slide">
<div>
<h3>Caption</h3>
<p>This text describes the fourth slide</p>
</div>
</div>
</div>
<button>
<span></span>
<span>Previous</span>
</button>
<button>
<span></span>
<span>Next</span>
</button>
</div>
Dark
Carousel with dark controls, indicators and captions

Caption
This text describes the first slide

Caption
This text describes the second slide

Caption
This text describes the third slide

Caption
This text describes the fourth slide
<div id="carouselDark">
<div>
<button></button>
<button></button>
<button></button>
<button></button>
</div>
<div>
<div>
<img src="../img/1200x600-success.png" alt="First slide">
<div>
<h3>Caption</h3>
<p>This text describes the first slide</p>
</div>
</div>
<div>
<img src="../img/1200x600-danger.png" alt="Second slide">
<div>
<h3>Caption</h3>
<p>This text describes the second slide</p>
</div>
</div>
<div>
<img src="../img/1200x600-warning.png" alt="Third slide">
<div>
<h3>Caption</h3>
<p>This text describes the third slide</p>
</div>
</div>
<div>
<img src="../img/1200x600-info.png" alt="Fourth slide">
<div>
<h3>Caption</h3>
<p>This text describes the fourth slide</p>
</div>
</div>
</div>
<button>
<span></span>
<span>Previous</span>
</button>
<button>
<span></span>
<span>Next</span>
</button>
</div>
<div id="carouselDark">
<div>
<button></button>
<button></button>
<button></button>
<button></button>
</div>
<div>
<div>
<img src="../img/1200x600-success.png" alt="First slide">
<div>
<h3>Caption</h3>
<p>This text describes the first slide</p>
</div>
</div>
<div>
<img src="../img/1200x600-danger.png" alt="Second slide">
<div>
<h3>Caption</h3>
<p>This text describes the second slide</p>
</div>
</div>
<div>
<img src="../img/1200x600-warning.png" alt="Third slide">
<div>
<h3>Caption</h3>
<p>This text describes the third slide</p>
</div>
</div>
<div>
<img src="../img/1200x600-info.png" alt="Fourth slide">
<div>
<h3>Caption</h3>
<p>This text describes the fourth slide</p>
</div>
</div>
</div>
<button>
<span></span>
<span>Previous</span>
</button>
<button>
<span></span>
<span>Next</span>
</button>
</div>
Crossfade




<div id="carouselFade">
<div>
<div>
<img src="../img/1200x600-success.png" alt="First slide">
</div>
<div>
<img src="../img/1200x600-danger.png" alt="Second slide">
</div>
<div>
<img src="../img/1200x600-warning.png" alt="Third slide">
</div>
<div>
<img src="../img/1200x600-info.png" alt="Fourth slide">
</div>
</div>
</div>
<div id="carouselFade">
<div>
<div>
<img src="../img/1200x600-success.png" alt="First slide">
</div>
<div>
<img src="../img/1200x600-danger.png" alt="Second slide">
</div>
<div>
<img src="../img/1200x600-warning.png" alt="Third slide">
</div>
<div>
<img src="../img/1200x600-info.png" alt="Fourth slide">
</div>
</div>
</div>
Options
Carousel with options defined with data attributes




<div id="carouselOptions">
<div>
<button></button>
<button></button>
<button></button>
<button></button>
</div>
<div>
<div>
<img src="../img/1200x600-success.png" alt="First slide">
</div>
<div>
<img src="../img/1200x600-danger.png" alt="Second slide">
</div>
<div>
<img src="../img/1200x600-warning.png" alt="Third slide">
</div>
<div>
<img src="../img/1200x600-info.png" alt="Fourth slide">
</div>
</div>
<button>
<span></span>
<span>Previous</span>
</button>
<button>
<span></span>
<span>Next</span>
</button>
</div>
<div id="carouselOptions">
<div>
<button></button>
<button></button>
<button></button>
<button></button>
</div>
<div>
<div>
<img src="../img/1200x600-success.png" alt="First slide">
</div>
<div>
<img src="../img/1200x600-danger.png" alt="Second slide">
</div>
<div>
<img src="../img/1200x600-warning.png" alt="Third slide">
</div>
<div>
<img src="../img/1200x600-info.png" alt="Fourth slide">
</div>
</div>
<button>
<span></span>
<span>Previous</span>
</button>
<button>
<span></span>
<span>Next</span>
</button>
</div>