Super Simple jQuery Slider Plugin - jScroll

Super Simple jQuery Slider Plugin - jScroll
File Size: 41.4KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

jScroll is a very simple and easy-to-use jQuery plugin for creating a content slider with infinite scroll support and arrow navigation.


  • Endless scroll.
  • Supports any html elements, not only images.
  • Vertical or horizontal scrolling.
  • Custom animation speed.
  • Cross-browser. Supports all the modern and older browsers.

How to use it:

1. Markup html structure.

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

2. Load the jQuery javascript library on the web page.

<script src=""></script> 

3. Load the jQuery jscroll's CSS and JS on the web page.

<script type="text/javascript" src="jscroll.js"></script>
<link type="text/css" rel="stylesheet" href="jscroll-style.css" />

4. Call the plugin with options.

<script type="text/javascript">
$('.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.

ScrollDirection:'left',     // Scroll Derection (left,top)
ScrollSpeed:500,            // Animation Speed
ScrollEndless:false,        // Endless scroll
PanelClass:'jScroll-Panel', // Panel CSS Class
ArrowImage:'arrows.png',    // Arrow image
ArrowBGCol:'transparent',   // Arrow background
CustomArrows:false,         // Use your own click areas
CustomPrevId:false,         // Prev ID override
CustomNextId:false          // Next ID override

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