Player

<div class="duarte-player">
    <a class="button black next right"></a>
    <a class="button black prev left"></a>
    <div class="guide"></div>

    <ul class="playlist">
        <li><img src="image.jpg"></li>
        <li><iframe src="iframe.html"></iframe></li>
    </ul>
</div>
            
Player with only one item

Player with thumbnails enabled
Player with Custom Content
  • Heading 1

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, hic itaque quas et consequatur illo molestiae pariatur dolorum dolor. Qui, consequatur, rerum quia quaerat vel voluptatem sapiente earum repellendus ratione?

  • Heading 2

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, hic itaque quas et consequatur illo molestiae pariatur dolorum dolor. Qui, consequatur, rerum quia quaerat vel voluptatem sapiente earum repellendus ratione?

  • Heading 3

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, hic itaque quas et consequatur illo molestiae pariatur dolorum dolor. Qui, consequatur, rerum quia quaerat vel voluptatem sapiente earum repellendus ratione?

  • Heading 4

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, hic itaque quas et consequatur illo molestiae pariatur dolorum dolor. Qui, consequatur, rerum quia quaerat vel voluptatem sapiente earum repellendus ratione?

  • Heading 5

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, hic itaque quas et consequatur illo molestiae pariatur dolorum dolor. Qui, consequatur, rerum quia quaerat vel voluptatem sapiente earum repellendus ratione?

Player with 1:1 Aspect Ratio

Player Options
data-fade="true" Will use fade transitions instead of the default slide
data-autoplay="true" Auto transition through the slides on a 3 second interval
data-ratio="1:1" Possible ratios include 4:3, 1:1 or a decimal ratio like 0.6. Default is 16:19 widescreen.
data-height="480" Set a fixed height on the player. This will override aspect ratio resizing
data-speed="3" Set the number of seconds between auto-play slides. Requires data-autoplay="true"
zencode: .duarte-player>button.black.next.right+button.black.prev.left+.guide+ul.playlist>li