Easy Cross-browser jQuery Slideshow Plugin - VMCSlider
File Size: | 11.6 KB |
---|---|
Views Total: | 6815 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.