Easy Cross-browser jQuery Slideshow Plugin - VMCSlider

VMCSlider is a simple jQuery slideshow / image slider plugin which makes it easy to create awesome, customizable transition effects between images you wan to present.

Features:

• Dots / Arrows navigation.
• Works on any modern browsers and even IE 6/7/8.
• 20+ built-in animations.
• Autoplay.
• Fully responsive.
• Ascending and Descending modes.
• Infinite looping like a carousel or a rotator.

How to use it:

1. Load the primary CSS file in the head section of the web page.

<link href="src/style.css" rel="stylesheet">

2. Add a group of images into the web page.

<div id="slide">
  <ul>
    <li data-text="Image Caption"><a href="javascript:;"><img src="demo1.jpg"/></a></li>
    <li><a href="javascript:;"><img src="demo2.jpg"/></a></li>
    <li><a href="javascript:;"><img src="demo3.jpg"/></a></li>
    <li><a href="javascript:;"><img src="demo4.jpg"/></a></li>
    <li><a href="javascript:;"><img src="demo5.jpg"/></a></li>
    <li><a href="javascript:;"><img src="demo6.jpg"/></a></li>
  </ul>
</div>

3. Load jQuery library and the jQuery VMCSlider plugin at the bottom of the web page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="src/vmc.slide.js"></script>
<script src="src/vmc.slide.effects.js"></script>

4. Initialize and setup the plugin as follow.

$('#slider').vmcSlider({
  
  /* image data to load
     e.g.
     data: [
      {
        src: '1.jpg',
        text: 'Caption 1',
        href: '#',
        target: '_blank'
      },
      ...
     ]
  */
  data: [],

  // width
  width: 'auto',

  // height
  height: 'auto',

  // image width
  // 0 = auto
  imgWidth: 0,

  // image height
  // 0 = auto
  imgHeight: 0,

  // min width
  minWidth: 0,

  // min height
  minHeight: 0,

  // grid options
  gridTdX: 10,
  gridTdY: 5,
  gridOdX: 30,
  gridOdY: 10,

  // shows navigation
  sideButton: true,

  // shows pagination
  navButton: true,

  // shows caption text
  showText: 'auto',

  // the caption contains html
  isHtml: false,

  // autoplay
  autoPlay: true,

  // ascending or descending
  ascending: true,

  // check out more effects in the vmc.slide.effects.js
  effects: ['fade'],

  // removes effects in IE6
  ie6Tidy: false,

  // random effects
  random: true,

  // duration
  duration: 4000,

  // animation speed
  speed: 800,

  // pause on hover
  hoverStop: true,

  // flip callback
  flip: function (fromIndex, toIndex) {
  },

  // created callback
  created: function () {
  },

});

Change log:

v2.0 (2018-03-20)

• Allows to dynamically load images from JS.
• Responsive design.
• Bugfix.

2015-12-31

• added callback events

---

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