Carousel

‹ Back

TinySlider

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 data-carousel-nav></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>