This time I will share jQuery Plugin and tutorial about 100% Responsive Image Carousel Plugin – jQuery vmc.simple.slide, hope it will help you in programming stack.
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.
2 |
integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" |
3 |
crossorigin="anonymous"></script> |
4 |
<script src="dist/vmc.simple.slide.min.js"></script> |
5 |
<link rel="stylesheet" href="dist/css/style.min.css"> |
2. Add your image list to the carousel container.
1 |
<div class="box" id="vmc-slide"> |
3 |
<li title="Image Caption Here"><img src="demo1.jpg"></li> |
4 |
<li><img src="demo2.jpg"></li> |
5 |
<li><img src="demo3.jpg"></li> |
3. Call the function on the top container to initialize the image carousel.
1 |
$('#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.
01 |
$('#vmc-slide').vmcSimpleSlide({ |
17 |
autoPlayDirection: 'right', |
29 |
showBottomButton: true, |
5. API methods.
2 |
$('#vmc-slide').show(); |
5 |
$('#vmc-slide').hide(); |
8 |
$('#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.
