jQuery Plugin to Scroll div Horizontally with Mouse Wheel

A lightweight jQuery plugin that lets you to scroll div horizontally with mouse wheel or with arrow keys. You can put anything in that div (i.e images, videos or any object) to move horizontally.

Plugin Overview

Plugin: jInvertScroll
Author: Alex Franzelin
Licence: MIT Licence
Published: April 19, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version
File Type: zip archive (HTML, CSS & JavaScript and Images)
Package Size: 489 KB

How to Use Plugin to Scroll div Horizontally :

1. There is no tough job to getting started with jInvertScroll to move / scroll div horizontally. To start, first load the jQuery and jInvertScroll‘s plugin file into HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>

<!--  jInvertScroll Js -->
<script src="src/jquery.jInvertScroll.js"></script>

2. After that, create a div element and put your contents (like images or whatever you want) into it.

    <div class="horizon scroll">
        <img src="images/horizon.png" alt="" />
    </div>
    <div class="middle scroll">
        <img src="images/middle.png" alt="" />
    </div>
    <div class="front scroll">
        <img src="images/front.png" alt="" />
    </div>

3. Initialize the plugin in jQuery document ready / anonymous function and done.

 (function($) {
        var elem = $.jInvertScroll(['.scroll'],        // an array containing the selector(s) for the elements you want to animate
            {
            height: 6000,                   // optional: define the height the user can scroll, otherwise the overall length will be taken as scrollable height
            onScroll: function(percent) {   //optional: callback function that will be called when the user scrolls down, useful for animating other things on the page
                console.log(percent);
            }
        });

        $(window).resize(function() {
          if ($(window).width() <= 768) {
            elem.destroy();
          }
          else {
            elem.reinitialize();
          }
        });
    }(jQuery));