Infinite & Automatic Scroller Plugin - jQuery smoothDivScroll

smoothDivScroll is a jQuery based smooth scroller/slider plugin that smoothly and infinitely scrolls through a set of HTML elements with mousewheel or by clicking on the right.left arrows navigation.

Dependencies:

• jQuery.
• jQuery UI (for easing functions).
• jQuery Mousewheel plugin.

How to use it:

1. Include the necessary JavaScript libraries on the html page.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery-ui.min.js"></script>
<script src="/path/to/jquery.mousewheel.min.js"></script>

2. Include the jQuery smoothDivScroll plugin's files on the page.

<link rel="stylesheet" href="css/smoothDivScroll.css">
<script src="js/jquery.smoothdivscroll-min.js"></script>

3. Insert a group of HTML elements to the scroller.

<div id="makeMeScrollable">
  <img src="1.jpg" alt="Demo image">
  <img src="2.jpg" alt="Demo image">
  <img src="3.jpg" alt="Demo image">
  <img src="4.jpg" alt="Demo image">
  <img src="5.jpg" alt="Demo image">
  ...
</div>

4. Initialize the scroller with no custom options.

$("div#makeMeScrollable").smoothDivScroll();

5. Auto start the scroller on page load.

$("div#makeMeScrollable").smoothDivScroll({

  // always, onStart or empty (no auto scrolling) String
  autoScrollingMode: "", 

  // right, left, backAndForth, endlessLoopRight, endlessLoopLeft String
  autoScrollingDirection: "endlessLoopRight", 

  // Pixels
  autoScrollingStep: 1, 

  // Milliseconds
  autoScrollingInterval: 10, 

  // Pause on hover
  autoScrollingPauseOnHover: false
  
});

6. Enable/disable the mousewheel functionality.

$("div#makeMeScrollable").smoothDivScroll({

  // vertical, horizontal, allDirections or empty (no mousewheel scrolling) String
  mousewheelScrolling: "", 

  // Pixels
  mousewheelScrollingStep: 70, 

  // Boolean
  easingAfterMouseWheelScrolling: true, 

  // Milliseconds
  easingAfterMouseWheelScrollingDuration: 300, 

  // String
  easingAfterMouseWheelScrollingFunction: "easeOutQuart", 

});

7. Config the hotspot scrolling.

$("div#makeMeScrollable").smoothDivScroll({

  hotSpotScrolling: true, // Boolean
  hotSpotScrollingStep: 15, // Pixels
  hotSpotScrollingInterval: 10, // Milliseconds
  hotSpotMouseDownSpeedBooster: 3, // Integer
  visibleHotSpotBackgrounds: "hover", // always, onStart, hover or empty (no visible hotspots)
  hotSpotsVisibleTime: 5000, // Milliseconds
  easingAfterHotSpotScrolling: true, // Boolean
  easingAfterHotSpotScrollingDistance: 10, // Pixels
  easingAfterHotSpotScrollingDuration: 300, // Milliseconds
  easingAfterHotSpotScrollingFunction: "easeOutQuart", // String

});

8. Default CSS classes for elements.

$("div#makeMeScrollable").smoothDivScroll({

  scrollingHotSpotLeftClass: "scrollingHotSpotLeft", // String
  scrollingHotSpotRightClass: "scrollingHotSpotRight", // String
  scrollingHotSpotLeftVisibleClass: "scrollingHotSpotLeftVisible", // String
  scrollingHotSpotRightVisibleClass: "scrollingHotSpotRightVisible", // String
  scrollableAreaClass: "scrollableArea", // String
  scrollWrapperClass: "scrollWrapper", // String

});

9. Misc settings.

$("div#makeMeScrollable").smoothDivScroll({

  hiddenOnStart: false, // Boolean
  getContentOnLoad: {}, // Object
  countOnlyClass: "", // String
  startAtElementId: "", // String
  manualContinuousScrolling: false, // Boolean
  scrollToAnimationDuration: 1000, // Milliseconds
  scrollToEasingFunction: "easeOutQuart" // String

});

---

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