Carousel
‹ BackTinySlider
Carousels are provided by the TinySlider library.
Basic Slider
<div data-carousel> <div data-carousel-slides> <img src="http://placehold.it/1024x600" /> <img src="http://placehold.it/1024x600" /> <img src="http://placehold.it/1024x600" /> <img src="http://placehold.it/1024x600" /> <img src="http://placehold.it/1024x600" /> </div> </div>
Gallery
Captions, videos, thumbnail navigation
<div data-carousel data-carousel-gallery> <div data-carousel-slides> <div> <img src="http://placehold.it/1024x600" /> <div class="carousel--caption"> This is a caption </div> </div> <div> <img src="http://placehold.it/1024x600" /> </div> <div> <div class="embed__youtube"> <iframe src="https://www.youtube.com/embed/3FOzD4Sfgag" frameborder="0" allowfullscreen></iframe> </div> <div class="carousel--caption"> This video has a caption </div> </div> <div> <img src="http://placehold.it/1024x600" /> </div> <div> <img src="http://placehold.it/1024x600" /> </div> <div> <img src="http://placehold.it/1024x600" /> </div> </div> <div data-carousel-nav></div> </div>
Cards
Add data-carousel-cards
to treat the slider as non-looping, fixed-width-items slider with no dot navigation.
Awesome card
The awesome card is pretty awesome.
Posted Yesterday
Awesome card
The awesome card is pretty awesome.
Posted Yesterday
Awesome card
The awesome card is pretty awesome.
Posted Yesterday
Awesome card
The awesome card is pretty awesome.
Posted Yesterday
Awesome card
The awesome card is pretty awesome.
Posted Yesterday
Awesome card
The awesome card is pretty awesome.
Posted Yesterday
Awesome card
The awesome card is pretty awesome.
Posted Yesterday
Awesome card
The awesome card is pretty awesome.
Posted Yesterday
Awesome card
The awesome card is pretty awesome.
Posted Yesterday
Awesome card
The awesome card is pretty awesome.
Posted Yesterday
Awesome card
The awesome card is pretty awesome.
Posted Yesterday
Awesome card
The awesome card is pretty awesome.
Posted Yesterday
Awesome card
The awesome card is pretty awesome.
Posted Yesterday
Awesome card
The awesome card is pretty awesome.
Posted Yesterday
Awesome card
The awesome card is pretty awesome.
Posted Yesterday
Awesome card
The awesome card is pretty awesome.
Posted Yesterday
Awesome card
The awesome card is pretty awesome.
Posted Yesterday
Awesome card
The awesome card is pretty awesome.
Posted Yesterday
Awesome card
The awesome card is pretty awesome.
Posted Yesterday
Awesome card
The awesome card is pretty awesome.
Posted Yesterday
Awesome card
The awesome card is pretty awesome.
Posted Yesterday
Awesome card
The awesome card is pretty awesome.
Posted Yesterday
Awesome card
The awesome card is pretty awesome.
Posted Yesterday
Awesome card
The awesome card is pretty awesome.
Posted Yesterday
Awesome card
The awesome card is pretty awesome.
Posted Yesterday
<div data-carousel data-carousel-cards> <div data-carousel-slides> <div> <div class="card"> <div class="card--image"> <img src="http://placehold.it/300x200" /> </div> <div class="card--content compressed"> <p><strong>Awesome card</strong></p> <p>The awesome card is pretty awesome.</p> <p><small class="type--grey">Posted Yesterday</small></p> </div> </div> </div> <div> <div class="card"> <div class="card--image"> <img src="http://placehold.it/300x200" /> </div> <div class="card--content compressed"> <p><strong>Awesome card</strong></p> <p>The awesome card is pretty awesome.</p> <p><small class="type--grey">Posted Yesterday</small></p> </div> </div> </div> <div> <div class="card"> <div class="card--image"> <img src="http://placehold.it/300x200" /> </div> <div class="card--content compressed"> <p><strong>Awesome card</strong></p> <p>The awesome card is pretty awesome.</p> <p><small class="type--grey">Posted Yesterday</small></p> </div> </div> </div> <div> <div class="card"> <div class="card--image"> <img src="http://placehold.it/300x200" /> </div> <div class="card--content compressed"> <p><strong>Awesome card</strong></p> <p>The awesome card is pretty awesome.</p> <p><small class="type--grey">Posted Yesterday</small></p> </div> </div> </div> <div> <div class="card"> <div class="card--image"> <img src="http://placehold.it/300x200" /> </div> <div class="card--content compressed"> <p><strong>Awesome card</strong></p> <p>The awesome card is pretty awesome.</p> <p><small class="type--grey">Posted Yesterday</small></p> </div> </div> </div> <div> <div class="card"> <div class="card--image"> <img src="http://placehold.it/300x200" /> </div> <div class="card--content compressed"> <p><strong>Awesome card</strong></p> <p>The awesome card is pretty awesome.</p> <p><small class="type--grey">Posted Yesterday</small></p> </div> </div> </div> <div> <div class="card"> <div class="card--image"> <img src="http://placehold.it/300x200" /> </div> <div class="card--content compressed"> <p><strong>Awesome card</strong></p> <p>The awesome card is pretty awesome.</p> <p><small class="type--grey">Posted Yesterday</small></p> </div> </div> </div> <div> <div class="card"> <div class="card--image"> <img src="http://placehold.it/300x200" /> </div> <div class="card--content compressed"> <p><strong>Awesome card</strong></p> <p>The awesome card is pretty awesome.</p> <p><small class="type--grey">Posted Yesterday</small></p> </div> </div> </div> <div> <div class="card"> <div class="card--image"> <img src="http://placehold.it/300x200" /> </div> <div class="card--content compressed"> <p><strong>Awesome card</strong></p> <p>The awesome card is pretty awesome.</p> <p><small class="type--grey">Posted Yesterday</small></p> </div> </div> </div> <div> <div class="card"> <div class="card--image"> <img src="http://placehold.it/300x200" /> </div> <div class="card--content compressed"> <p><strong>Awesome card</strong></p> <p>The awesome card is pretty awesome.</p> <p><small class="type--grey">Posted Yesterday</small></p> </div> </div> </div> <div> <div class="card"> <div class="card--image"> <img src="http://placehold.it/300x200" /> </div> <div class="card--content compressed"> <p><strong>Awesome card</strong></p> <p>The awesome card is pretty awesome.</p> <p><small class="type--grey">Posted Yesterday</small></p> </div> </div> </div> <div> <div class="card"> <div class="card--image"> <img src="http://placehold.it/300x200" /> </div> <div class="card--content compressed"> <p><strong>Awesome card</strong></p> <p>The awesome card is pretty awesome.</p> <p><small class="type--grey">Posted Yesterday</small></p> </div> </div> </div> <div> <div class="card"> <div class="card--image"> <img src="http://placehold.it/300x200" /> </div> <div class="card--content compressed"> <p><strong>Awesome card</strong></p> <p>The awesome card is pretty awesome.</p> <p><small class="type--grey">Posted Yesterday</small></p> </div> </div> </div> <div> <div class="card"> <div class="card--image"> <img src="http://placehold.it/300x200" /> </div> <div class="card--content compressed"> <p><strong>Awesome card</strong></p> <p>The awesome card is pretty awesome.</p> <p><small class="type--grey">Posted Yesterday</small></p> </div> </div> </div> <div> <div class="card"> <div class="card--image"> <img src="http://placehold.it/300x200" /> </div> <div class="card--content compressed"> <p><strong>Awesome card</strong></p> <p>The awesome card is pretty awesome.</p> <p><small class="type--grey">Posted Yesterday</small></p> </div> </div> </div> <div> <div class="card"> <div class="card--image"> <img src="http://placehold.it/300x200" /> </div> <div class="card--content compressed"> <p><strong>Awesome card</strong></p> <p>The awesome card is pretty awesome.</p> <p><small class="type--grey">Posted Yesterday</small></p> </div> </div> </div> <div> <div class="card"> <div class="card--image"> <img src="http://placehold.it/300x200" /> </div> <div class="card--content compressed"> <p><strong>Awesome card</strong></p> <p>The awesome card is pretty awesome.</p> <p><small class="type--grey">Posted Yesterday</small></p> </div> </div> </div> <div> <div class="card"> <div class="card--image"> <img src="http://placehold.it/300x200" /> </div> <div class="card--content compressed"> <p><strong>Awesome card</strong></p> <p>The awesome card is pretty awesome.</p> <p><small class="type--grey">Posted Yesterday</small></p> </div> </div> </div> <div> <div class="card"> <div class="card--image"> <img src="http://placehold.it/300x200" /> </div> <div class="card--content compressed"> <p><strong>Awesome card</strong></p> <p>The awesome card is pretty awesome.</p> <p><small class="type--grey">Posted Yesterday</small></p> </div> </div> </div> <div> <div class="card"> <div class="card--image"> <img src="http://placehold.it/300x200" /> </div> <div class="card--content compressed"> <p><strong>Awesome card</strong></p> <p>The awesome card is pretty awesome.</p> <p><small class="type--grey">Posted Yesterday</small></p> </div> </div> </div> <div> <div class="card"> <div class="card--image"> <img src="http://placehold.it/300x200" /> </div> <div class="card--content compressed"> <p><strong>Awesome card</strong></p> <p>The awesome card is pretty awesome.</p> <p><small class="type--grey">Posted Yesterday</small></p> </div> </div> </div> <div> <div class="card"> <div class="card--image"> <img src="http://placehold.it/300x200" /> </div> <div class="card--content compressed"> <p><strong>Awesome card</strong></p> <p>The awesome card is pretty awesome.</p> <p><small class="type--grey">Posted Yesterday</small></p> </div> </div> </div> <div> <div class="card"> <div class="card--image"> <img src="http://placehold.it/300x200" /> </div> <div class="card--content compressed"> <p><strong>Awesome card</strong></p> <p>The awesome card is pretty awesome.</p> <p><small class="type--grey">Posted Yesterday</small></p> </div> </div> </div> <div> <div class="card"> <div class="card--image"> <img src="http://placehold.it/300x200" /> </div> <div class="card--content compressed"> <p><strong>Awesome card</strong></p> <p>The awesome card is pretty awesome.</p> <p><small class="type--grey">Posted Yesterday</small></p> </div> </div> </div> <div> <div class="card"> <div class="card--image"> <img src="http://placehold.it/300x200" /> </div> <div class="card--content compressed"> <p><strong>Awesome card</strong></p> <p>The awesome card is pretty awesome.</p> <p><small class="type--grey">Posted Yesterday</small></p> </div> </div> </div> </div> </div>
Custom buttons
Very basic implementation of custom arrow buttons
<div data-carousel> <div data-carousel-slides> <img src="http://placehold.it/1024x600" /> <img src="http://placehold.it/1024x600" /> <img src="http://placehold.it/1024x600" /> <img src="http://placehold.it/1024x600" /> <img src="http://placehold.it/1024x600" /> </div> <div data-carousel-nav></div> <div> <button type="button" data-carousel-previous class="button">Previous</button> <button type="button" data-carousel-next class="button">Next</button> </div> </div>