Simple jQuery Image Carousel with Cool CSS3 Animations - jlider

A fresh new jQuery slideshow/carsousel plugin which allows to cycle through a series of images with cool CSS3 powered animations.

Features:

• Fullscreen modes.
• Progress indicator.
• 10+ cool transition effects.
• Random transition effect for each slide.
• Autoplay and pause on hover.
• Nice image captions.
• Avoid people to save your photos.
• Line/Dot/Number/Arrow navigation.
• Custom callback functions.

How to use it:

1. Load jQuery library together with jQuery jlider plugin's stylesheet and script in your web page.

<link rel="stylesheet" href="jlider/jlider.css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jlider.min.js"></script>

2. Create a list of images for the carousel/slideshow. The plugin will automatically generate images captions from either alt or title attributes in the <img> tag.

<ul class="jlider" id="slider-demo">
  <li><img src="img1.jpg" alt="1.jpg" title="Image Title 1"><li>
  <li><img src="img2.jpg" alt="2.jpg" title="Image Title 2"><li>
  <li><img src="img3.jpg" title="Image Title 3"><li>
  <li><img src="img4.jpg" title="Image Title 4"><li>
  <li><img src="img5.jpg" alt="5.jpg" title="Image Title 5"><li>
<ul>

3. To initialize the carousel/slideshow, just simple call the function on the Html list and we're done.

$("#slider-demo").jliderSlide((
slideEffect: "fade", // Slide effects [fade | slide | scaleIn | scaleOut | random]
viewEffect : "no", // View effects [no | scaleIn | scaleOut | TransL | TransR | RotL | RotR | random]
visiTime : 4000, // Time between a slide
visiProgress : false,// Show progress bar
autoPlay : true, // Auto play slider
width: 600,// Slider width
height : 380,// Slider height
photoCaption : false,// Text caption for slide
noCopy : false,// No copy photo
hideControl: "visible",// Control buttons visible [visible | hover | hide]
fullScreen : true, // Allow fullscreen slide
navType: "dot",// Navigation type [line | dot | number | preview]
hoverPause : false,// Pause slide when hover slider
Loaded : function (curSlide) {}, // Custom functions after all photos loaded
pressPlay: function (curSlide) {}, // Custom functions after press Play
pressPause : function (curSlide) {}, // Custom functions after press Pause
pressNext: function (curSlide) {}, // Custom functions after press Next
pressPrev: function (curSlide) {}, // Custom functions after press Prev
beforeSlide: function (curSlide) {}, // Custom functions before a slide
afterSlide : function (curSlide) {}, // Custom functions after a slide
goFullscreen : function (curSlide) {}, // Custom functions after enter fullscreen
outFullscreen: function (curSlide) {}, // Custom functions after exit fullscreen
));

Change log:

2014-10-26

• update.

---

This awesome jQuery plugin is developed by juskteez. For more Advanced Usages, please check the demo page or visit the official website.