Cross-sliding Image Slider Plugin With jQuery And CSS3 - jSlides

jSlides is an easy and CSS-less jQuery plugin used to create a cross-sliding image slider with animated image descriptions and thumbnail navigation. Smooth slide animations based on CSS3 transitions.

How to use it:

1. Add the latest version of jQuery library and jQuery jSlides plugin into the html page.

<script src="jquery.min.js"></script>
<script src="jSlides.js"></script>

2. Wrap the images you want to present in a DIV container.

<div class="slider">
  <img src="img/1.jpg">
  <img src="img/2.jpg">
  <img src="img/3.jpg">
  <img src="img/4.jpg">
  <img src="img/5.jpg">
</div>

3. Initialize the slider and add custom descriptions to each image.

$('.slider').jSlides({
  img1: {h2:'Slide 1', h3:'I am slide 1'},
  img2: {h2:'Slide 2', h3:'I am slide 2'},
  img3: {h2:'Slide 3', h3:'I am slide 3'},
  img4: {h2:'Slide 4', h3:'I am slide 4'},
  img5: {h2:'Slide 5', h3:'I am slide 5'},
});

4. Enable the autoplay functionality and specify the transitions speed.

$('.slider').jSlides({
  img1: {h2:'Slide 1', h3:'I am slide 1'},
  img2: {h2:'Slide 2', h3:'I am slide 2'},
  img3: {h2:'Slide 3', h3:'I am slide 3'},
  img4: {h2:'Slide 4', h3:'I am slide 4'},
  img5: {h2:'Slide 5', h3:'I am slide 5'},
  autoplay: true,
  time: 3000,
});

5. Adjust the width/height of the slider depending on the image size.

$('.slider').jSlides({
  img1: {h2:'Slide 1', h3:'I am slide 1'},
  img2: {h2:'Slide 2', h3:'I am slide 2'},
  img3: {h2:'Slide 3', h3:'I am slide 3'},
  img4: {h2:'Slide 4', h3:'I am slide 4'},
  img5: {h2:'Slide 5', h3:'I am slide 5'},
  autoplay: true,
  time: 3000,
  width: 1280,
  height: 500
});

Change log:

2016-05-09

• bugfix

---

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