Rondell - Display images and other content in a nice way

Version 1.0.0 - Created by Sebastian Helzle






Preset - Pages


This demo shows how to display a mix of text and images as slider.

If an item contains no image, the item's content is displayed normally and can be scrolled. And if the item contains an image, the caption is displayed as overlay.

You can press arrow left and right on your keyboard to navigate through the images. Automatic rotation is disabled in this demo.

Here's how it's done

<div id="rondellPages">
  <div>
    <img src="images/page/water.png" alt="Waterfall">
    <h2>Waterfall</h2>
    <p>...</p>
  </div>
  
  ...
  
</div>

<script type="text/javascript">
  $("#rondellPages > div").rondell({
    preset: "pages"
  });
</script>