Skip to main content

Slideshows

To create a slideshow, simply copy and paste the code below and replace with images of your own.

HTML
<div class="slideshow-wrapper">
    <ul data-orbit>
        <li>
            <img src="" alt="image alt text">
        </li>
        <li>
            <img src="" alt="image alt text">
        </li>
    </ul>
</div>
Rendered HTML
  • image alt text
  • image alt text

Advanced Use

Alternatively, you can add navigation to the above slideshow by replacing slideshow-wrapper with orbit-wrapper. The second slide also offers an example of how to optionally add captions.

HTML
<div class="orbit-wrapper">
    <ul data-orbit>
        <li>
            <img src="" alt="image alt text">
        </li>
        <li>
            <img src="" alt="image alt text">
            <div class="orbit-caption">Caption for image 2</div>
        </li>
    </ul>
</div>
Rendered HTML
  • image alt text
  • image alt text
    Caption for image 2