Carousel - Ornament Pattern Library and UI/UX Documentation

Warning: You are currently browsing without javascript enabled.

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>

Gallery

Captions, videos, thumbnail navigation

This is a caption

This video has a caption

<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>