Micro Automatic Image Carousel Plugin For jQuery - SlideZ

SlideZ is a simple plain jQuery slider plugin which converts an html list of images into an automatic, endless-sliding carousel UI. It contains navigation arrows and pagination bullets to manually move left and right between all images. The plugin also has the ability to crop & resize the images to fit the carousel size.

How to use it:

1. Link jQuery library and the jQuery SlideZ plugin's JS & CSS files into the html document like this:

<link rel="stylesheet" href="slideZ.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="slideZ.js"></script>

2. Create a list of images and then insert them together with the pagination arrows to the slider.

<div class="slide_box">

  <ul class="slide_img">
    <li>
      <img src="1.jpg" alt="">
    </li>
    <li>
      <img src="2.jpg" alt="">
    </li>
    <li>
      <img src="3.jpg" alt="">
    </li>
  </ul>

  <a href="javascript:;" class="btn_l">&lt;</a>
  <a href="javascript:;" class="btn_r">&gt;</a>

</div>

3. Initialize the plugin to generate a default image carousel on the webpage.

$(".slide_box").slideZ();

4. Change the default animation speed.

$(".slide_box").slideZ({
  speed : 1000
});

5. Change the default animation delay in milliseconds.

$(".slide_box").slideZ({
  beginTime: 3000
});

6. Disable the autoplay functionality.

$(".slide_box").slideZ({
  autoPlay: false
});

7. Show/hide the carousel controls.

$(".slide_box").slideZ({

  // navigation arrows
  haveBtn: true,

  // pagination bullets
  haveCircle: false
  
});

---

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