Cross-platform jQuery Slider/Carousel Plugin - jPicture

Cross-platform jQuery Slider/Carousel Plugin - jPicture
File Size: 11.5 KB
Views Total:
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.