Lightweight jQuery Image Carousel / Gallery Plugin - OTG Carousel

OTG Carousel is a simple, lightweight jQuery & jQuery UI based image slider / slideshow / carousel / gallery plugin that features auto rotation, dots pagination, thumbnails / arrows navigation, and custom image captions.

How to use it:

1. Add the needed jQuery and jQuery UI to your html page.

<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>

2. Add the jQuery OTG Carousel plugin's files after jQuery library.

<link rel="stylesheet" href="css/jquery.otg-carousel.css">
<script src="js/jquery.otg-carousel.js"></script>

3. Create a container for the carousel / gallery.

<div id="carousel"></div>

4. Initialize the plugin and specify an array of images with captions for the carousel / gallery.

$('#carousel').carousel({
  images: [
    {src: '1.jpg', caption: '<h2>First Image</h2>'},
    {src: '2.jpg', caption: '<h2>Second Image</h2>'},
    {src: '3.jpg', caption: '<h2>Third Image</h2>'},
    ...
  ]
});

5. More customization options.

$('#carousel').carousel({

  // an array of images
  images: [{
    src: 'images/placeholder.png',
    caption: 'No Images Loaded'}],

  // displays pagination bullets
  useDots: false,

  // displays image captions
  useCaptions: false,

  // displays navigation arrows
  useArrows: false,

  // initial image
  currentImageIndex: 0,

  // transition delay
  interval: 3000,

  // displays thumbnails
  useThumbnails: false
  
});

---

This awesome jQuery plugin is developed by offthegridcoders. For more Advanced Usages, please check the demo page or visit the official website.