100% Responsive Image Carousel Plugin - jQuery vmc.simple.slide

A dead simple jQuery slider plugin that helps you create a responsive, cross-browser, full-width, infinite-looping carousel from a list of images.

More features:

• Auto extracts caption text from list's title attribute.
• Supports HTML caption.
• Allows to set min/max height and width.
• Supports both Right and Left sliding.
• Autoplay with pause on hover.
• Allows to show/hide navigation and pagination controls.

How to use it:

1. Add references to jQuery library and the jQuery vmc.simple.slide plugin's files.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<script src="dist/vmc.simple.slide.min.js"></script>
<link rel="stylesheet" href="dist/css/style.min.css">

2. Add your image list to the carousel container.

<div class="box" id="vmc-slide">
  <ul>
    <li title="Image Caption Here"><img src="demo1.jpg"></li>
    <li><img src="demo2.jpg"></li>
    <li><img src="demo3.jpg"></li>
    ...
  </ul>
</div>

3. Call the function on the top container to initialize the image carousel.

$('#vmc-slide').vmcSimpleSlide();

4. Below are the available settings to customize the image carousel. You can also modify defaults directly in the vmc.simple.slide.min.js file.

$('#vmc-slide').vmcSimpleSlide({

  // width/height
  width: 'auto',
  height: 'auto',

  // min width
  minWidth: 0,

  // min height
  minHeight: 0,

  // autoplay
  auto: true,

  // 'right' or 'left'
  autoPlayDirection: 'right',

  // duration of animation
  duration: 4000,

  // animation speed
  speed: 600,

  // shows navigation buttons
  showSideButton: true,

  // shows pagination bullets
  showBottomButton: true,

  // shows image caption
  showSummary: 'auto',

  // allows HTML content
  summaryIsHtml: false,

  // pause on hover
  hoverStop: true
  
});

5. API methods.

// shows the carousel
$('#vmc-slide').show();

// hides the carousel
$('#vmc-slide').hide();

// resets the size of the carousel
$('#vmc-slide').vmcSimpleSlide('reSize');

---

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