Basic jQuery Image Scroller/Carousel Plugin - jScroll
File Size: | 41.7 KB |
---|---|
Views Total: | 2285 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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 speedScrollEndless: false
: endless loopingPanel Class: 'jScroll Panel'
: Panel CSS ClassArrow Image: 'arrows.png'
: arrow imageArrowBGCol: 'transparent'
: arrow backgroundArrow Width: 20
: width of the arrowsArrow Height: 20
: height of the arrowsArrowOpacity: .5
: opacity of the arrowsArrowTop: '50% '
: top positionArrow Left: 0
: left positionArrow Right: 0
: right positionArrow Bottom: false
: bottom positionMoving: true
: active movingMoving Size: 20
: moving size in pixelCustom Arrows: false
: custom arrowsCustomPrevId: false
: Prev IDCustomNextId: 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.