Basic jQuery Image Scroller/Carousel Plugin - jScroll

jScroll is a simple yet highly customizable jQuery image scroller/carousel plugin that enables you to cycle through a set of images with infinite scrolling.

How to use it:

1. Load the jQuery library together with jQuery jScroll plugin's CSS and script in your Html page.

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

2. Markup Html structure.

<div class="jScroll">
  <div class="jScroll-item"> <img src="image-1.jpg" alt="sample image">
    <p>Description 1</p>
  </div>
  <div class="jScroll-item"> <img src="image-2.jpg" alt="sample image">
    <p>Description 2</p>
  </div>
  <div class="jScroll-item"> <img src="image-3.jpg" alt="sample image">
    <p>Description 3</p>
  </div>
  ...
  <div class="clear"></div>
</div>

3. The sample CSS to style the image scroller.

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  line-height: 0;
  width: 0;
  height: 0
}

.jScroll {
  width: 920px;
  z-index: 1
}

.jScroll-item {
  float: left;
  width: 197px;
  height: 260px;
  position: relative;
  padding: 0 15px
}

.jScroll-item img {
  width: 197px;
  margin: 0 auto
}

.jScroll-item p {
  text-align: justify;
  font-size: 12px;
  color: #484848;
  line-height: 20px
}

4. Initialize the plugin with customization options.

$('.jScroll').css('height', 260).jScroll({
'ScrollDirection': 'left',
'PanelClass': 'jScroll-item',
'ArrowOpacity': 1,
'ArrowImage': './arrows.png',
'ArrowBGCol': 'transparent',
'ArrowWidth': 24,
'ArrowHeight': 24,
'ArrowLeft': -12,
'ArrowRight': -12,
'Moving': true,
'ScrollEndless': true
});

5. All the default options.

• Scroll Direction: 'left': scroll direction (left, top)
• Scroll Speed​​: 500: animation speed
• ScrollEndless: false: endless looping
• Panel Class: 'jScroll Panel': Panel CSS Class
• Arrow Image: 'arrows.png': arrow image
• ArrowBGCol: 'transparent': arrow background
• Arrow Width: 20: width of the arrows
• Arrow Height: 20: height of the arrows
• ArrowOpacity: .5: opacity of the arrows
• ArrowTop: '50​​% ': top position
• Arrow Left: 0: left position
• Arrow Right: 0: right position
• Arrow Bottom: false: bottom position
• Moving: true: active moving
• Moving Size: 20: moving size in pixel
• Custom Arrows: false: custom arrows
• CustomPrevId: false: Prev ID
• CustomNextId: false: Next ID

---

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