Infinite Automatic Scroller smoothDivScroll - Download Infinite & Automatic Scroller Plugin - jQuery smoothDivScroll

Download Infinite & Automatic Scroller Plugin – jQuery smoothDivScroll

By Posted on

This time I will share jQuery Plugin and tutorial about Infinite & Automatic Scroller Plugin – jQuery smoothDivScroll, hope it will help you in programming stack.

Infinite Automatic Scroller smoothDivScroll - Download Infinite & Automatic Scroller Plugin - jQuery smoothDivScroll
File Size: 30.8
Views Total: 5098
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

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.

view source
1 <script src="/path/to/jquery.min.js"></script>
2 <script src="/path/to/jquery-ui.min.js"></script>
3 <script src="/path/to/jquery.mousewheel.min.js"></script>

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

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

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

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

4. Initialize the scroller with no custom options.

view source
1 $("div#makeMeScrollable").smoothDivScroll();

5. Auto start the scroller on page load.

view source
01 $("div#makeMeScrollable").smoothDivScroll({
02  
03   // always, onStart or empty (no auto scrolling) String
04   autoScrollingMode: "",
05  
06   // right, left, backAndForth, endlessLoopRight, endlessLoopLeft String
07   autoScrollingDirection: "endlessLoopRight",
08  
09   // Pixels
10   autoScrollingStep: 1,
11  
12   // Milliseconds
13   autoScrollingInterval: 10,
14  
15   // Pause on hover
16   autoScrollingPauseOnHover: false
17    
18 });

6. Enable/disable the mousewheel functionality.

view source
01 $("div#makeMeScrollable").smoothDivScroll({
02  
03   // vertical, horizontal, allDirections or empty (no mousewheel scrolling) String
04   mousewheelScrolling: "",
05  
06   // Pixels
07   mousewheelScrollingStep: 70,
08  
09   // Boolean
10   easingAfterMouseWheelScrolling: true,
11  
12   // Milliseconds
13   easingAfterMouseWheelScrollingDuration: 300,
14  
15   // String
16   easingAfterMouseWheelScrollingFunction: "easeOutQuart",
17  
18 });

7. Config the hotspot scrolling.

view source
01 $("div#makeMeScrollable").smoothDivScroll({
02  
03   hotSpotScrolling: true, // Boolean
04   hotSpotScrollingStep: 15, // Pixels
05   hotSpotScrollingInterval: 10, // Milliseconds
06   hotSpotMouseDownSpeedBooster: 3, // Integer
07   visibleHotSpotBackgrounds: "hover", // always, onStart, hover or empty (no visible hotspots)
08   hotSpotsVisibleTime: 5000, // Milliseconds
09   easingAfterHotSpotScrolling: true, // Boolean
10   easingAfterHotSpotScrollingDistance: 10, // Pixels
11   easingAfterHotSpotScrollingDuration: 300, // Milliseconds
12   easingAfterHotSpotScrollingFunction: "easeOutQuart", // String
13  
14 });

8. Default CSS classes for elements.

view source
01 $("div#makeMeScrollable").smoothDivScroll({
02  
03   scrollingHotSpotLeftClass: "scrollingHotSpotLeft", // String
04   scrollingHotSpotRightClass: "scrollingHotSpotRight", // String
05   scrollingHotSpotLeftVisibleClass: "scrollingHotSpotLeftVisible", // String
06   scrollingHotSpotRightVisibleClass: "scrollingHotSpotRightVisible", // String
07   scrollableAreaClass: "scrollableArea", // String
08   scrollWrapperClass: "scrollWrapper", // String
09  
10 });

9. Misc settings.

view source
01 $("div#makeMeScrollable").smoothDivScroll({
02  
03   hiddenOnStart: false, // Boolean
04   getContentOnLoad: {}, // Object
05   countOnlyClass: "", // String
06   startAtElementId: "", // String
07   manualContinuousScrolling: false, // Boolean
08   scrollTo<a href="https://www.jqueryscript.net/animation/">Animation</a>Duration: 1000, // Milliseconds
09   scrollToEasingFunction: "easeOutQuart" // String
10  
11 });

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

source : jquery.net

Related posts: