A Small Yet Robust jQuery Slider Plugin - Scooch

Scooch is another jQuery slider plugin that makes it easy to create a customizable slider which supports any html elements within it.

Features:

• 3 transition effect: fade, slide or blind.
• Configurable sliding orientation: left, right, up or down.
• Bullets navigation.
• Configurable transition speed and interval.
• Mouse wheel and touch swipe to slide through the slides.
• Auto sliding and pause on mouse on hover.
• Muliple sliders on one page.

Basic Usage:

1. Include jQuery Scooch plugin's stysheet file in the page.

<link href="css/jquery.scooch.css" rel="stylesheet" />

2. The html.

<div id="example" class="sliderWrapper">
<ul>
<li>
Slide 1
</li>
<li>
Slide 2
</li>
<li>
Slide 3
</li>
<li>
item 4
</li>
</ul>
</div>

3. Include jQuery Scooch plugin's script at the bottom of your page, but after jQuery library.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.scooch.js" type="text/javascript"></script> 

4. Call the plugin on the slider wrapper.

<script>
$(function(){
$('.sliderWrapper').scooch({
transition: 'slide',               // (string)       Possible values: fade, slide, blind;
direction: 'left',                // (string)       For sliding direction; 'left' & 'right' are used for sliding, 'up' & 'down' are used for blind
//wrap            : false,                 // (true | false) For future use; not implemented in code yet.
//keepText        : false,                 // (true | false) transition text independant of the slide
//textTransistion : 'fade',                // (string)       How the text changes from slide to slide 
interval: 3000,                  // (milliseconds) Duration between transitions
transitionSpeed: 1800,                  // (milliseconds) Duration for the actual transition
returnSpeed: 1200,                  // (milliseconds) Duration for reset, mostly for sliding
sliderList: 'scooch-slide-list',   // Element        ID given to the UL
slideListItem: 'scooch-slide',  // Element        Class given to each li (slide)
navItemClass: 'scooch-nav-item',
navListClass: 'scooch-nav',
navListWrapper: 'scooch-nav-wrapper',
startSlide: 1,                     // (integer)      Slide to start the animation on
navigation: true,                  // Display navigation
autoTransition: true,                  // Enable AutoSliding
hoverPause: true,                  // Pause AutoSlide on slider hover
hoverScroll: true,                 // allow the user to use the mouse wheel to scroll through the slides. This should work for touch device finger swiping as well
});
});
</script>

Change log:

2013-12-19

• Fixed for IE.

---

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