Easy Cross-browser jQuery Slideshow Plugin - VMCSlider

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.

  • Publication date: 20.03.2018
  • Source