Cross-platform jQuery Slider/Carousel Plugin - jPicture
File Size: | 11.5 KB |
---|---|
Views Total: | 2047 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
jPicture is an easy-to-use jQuery plugin for creating a responsive, auto-sliding (or cross-fading) image slider/carousel that works perfectly on both desktop and mobile browsers.
How to use it:
1. Download and insert the jPicture plugin's file (jPicture.css
& jPicture.js
) into the html document. Make sure you first have jQuery library loaded.
<link href="jPicture.css" rel="stylesheet"> <script src="//code.jquery.com/jquery.min.js"></script> <script src="jPicture.js"></script>
2. Insert your own images to the slider/carousel following the html structure like this:
<div id="myCarousel"> <div> <div><a href="#1"><img src="1.jpg"></a></div> <div><a href="#2"><img src="2.jpg"></a></div> <div><a href="#3"><img src="3.jpg"></a></div> <div><a href="#4"><img src="4.jpg"></a></div> <div><a href="#5"><img src="5.jpg"></a></div> ... </div> </div>
3. Set the height/width of the image slider/carousel on desktop browser.
#myCarousel { width: 600px; height: 450px; }
4. Initialize the plugin by calling the function on the top DIV container. Done.
jPicture("#myCarousel");
5. Set the animation type to 'slide'.
jPicture("#myCarousel",{ type: 'slide' });
6. Specify the time to wait when transitioning to the next image.
jPicture("#myCarousel",{ autoplay: 5000 });
Change log:
2017-08-29
- v1.1.3
This awesome jQuery plugin is developed by MarkingCode. For more Advanced Usages, please check the demo page or visit the official website.