Dynamic Horizontal / Vertical Image Slider Plugin - slideBox

slideBox is a lightweight, simple-to-use, jQuery based desktop carousel component to cycle through a group of images specified in the JavaScript array.

Features:

• Supports both horizontal and vertical modes.
• Slide & fade animations.
• Navigation arrows.
• Bottom or side pagination dots.
• Auto play with a specific interval.
• Auto resize images to fit within the carousel.

How to use it:

1. To use this carousel component, you need to load the following JS & CSS files into the webpage.

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

2. Create a DIV container in which you want to place the carousel.

<div id="demo" class="slide-box"></div>

3. Initialize the plugin and define an array of images you want to present in the carousel.

$('#demo').slide({
  arrImg:['1.jpg','2.jpg','3.jpg']
});

4. Set the initial image on page ready.

$('#demo').slide({
  arrImg:['1.jpg','2.jpg','3.jpg'],
  current: 1
});

5. Config the carousel to slide through the images vertically.

$('#demo').slide({
  arrImg:['1.jpg','2.jpg','3.jpg'],
  mode: 'VERTICAL_MODE'
});

6. Config the carousel to fade through the images just like a slideshow.

$('#demo').slide({
  arrImg:['1.jpg','2.jpg','3.jpg'],
  mode: 'FADE_MODE'
});

7. Disable / hide the navigation.

$('#demo').slide({
  isNav: false
});

8. Config the autoplay behavior.

$('#demo').slide({
  timeOut: {
    auto: true,
    timer: null,
    interval: 2000
  },
});

---

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