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

File Size: 15.2 KB
Views Total: 5048
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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" 
<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">
    <li title="Image Caption Here"><img src="demo1.jpg"></li>
    <li><img src="demo2.jpg"></li>
    <li><img src="demo3.jpg"></li>

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


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.


  // 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

// hides the carousel

// resets the size of the carousel

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