Orbit is a slide presentation plugin. By default, images are displayed one at a time, advancing automatically after a predetermined period. A user can stop and restart the presentation, click forward or backward, or go directly to a specific slide. It displays the slide number and count, and it displays a caption if provided.
While intended for images, Orbit can display any type of content (you can even use text). Orbit is similar to a PowerPoint presentation.
Here is the basic setup:
<ul data-orbit>
<li><img src="./images/prep.jpg" /></li>
<li><img src="./images/start.jpg" /></li>
<li><img src="./images/cooked.jpg" /></li>
<li><img src="./images/trek.jpg" /></li>
</ul>
That's it! We have an unordered list with the data-orbit
attribute and content in each list item. From this simple setup, JavaScript takes over and presents the images as a slide presentation with controls and autoplay.
Let's add...