<script>$=jQuery=null</script>
    <script  src="https://code.jquery.com/jquery-2.2.4.js"
        integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
        crossorigin="anonymous"></script>
    <script src="https://davetayls.me/jquery.kinetic/jquery.kinetic.js" type="text/javascript" charset="utf-8"></script>

    <style type="text/css">

      pre code {
        background: #ddd;
        display: block;
        padding: 10px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -o-border-radius: 5px;
        border-radius: 5px;
      }

      #container {
        margin: 0 auto;
      }

      #wrapper {
        border: solid 5px #000;
        height: 400px;
        width: 100%;
        overflow: hidden;
      }

      #controls {
        padding: 10px;
      }

      #controls span {
        cursor: pointer;
      }

      .kinetic-moving-up {
        border-top-color: green !important;
      }

      .kinetic-moving-down {
        border-bottom-color: green !important;
      }

      .kinetic-moving-left {
        border-left-color: green !important;
      }

      .kinetic-moving-right {
        border-right-color: green !important;
      }

      .kinetic-decelerating-up {
        border-top-color: red !important;
      }

      .kinetic-decelerating-down {
        border-bottom-color: red !important;
      }

      .kinetic-decelerating-left {
        border-left-color: red !important;
      }

      .kinetic-decelerating-right {
        border-right-color: red !important;
      }

      #inner {
        width: 2000px;
        height: 100px;
      }

      #inner img {
        display: block;
        width: 2000px;
      }

      #left, #right {
        cursor: pointer;
      }

    </style>
    <div id="container">
      <p>
        Drag a mouse or use touch gestures over the windows below to scroll
        the pane. If you let go with momentum the scrolling will slow
        gradually.
      </p>
      <div id="wrapper">
        <div id="inner">
          <img src="https://i.imgur.com/wTrFZ5r.jpg" alt="wembley stadium"/>
        </div>
      </div>
      <div id="controls">
        <span id="left">&lt; left</span> |
        <span id="right">right &gt;</span>
        &nbsp;&nbsp; -- &nbsp;&nbsp;
        <span id="end">end (decelerates)</span>

        &nbsp;&nbsp; -- &nbsp;&nbsp;
        <span id="stop">stop (stop immediately)</span>

        &nbsp;&nbsp; -- &nbsp;&nbsp;
        <span id="detach">detach</span>

        &nbsp;&nbsp; -- &nbsp;&nbsp;
        <span id="attach">attach</span>
      </div>
      <script type="text/javascript" charset="utf-8">
        $('#wrapper').kinetic();

        $('#left').click(function() {
          $('#wrapper').kinetic('start', { velocity: -10 });
        });
        $('#right').click(function() {
          $('#wrapper').kinetic('start', { velocity: 10 });
        });
        $('#end').click(function() {
          $('#wrapper').kinetic('end');
        });
        $('#stop').click(function() {
          $('#wrapper').kinetic('stop');
        });
        $('#detach').click(function() {
          $('#wrapper').kinetic('detach');
        });
        $('#attach').click(function() {
          $('#wrapper').kinetic('attach');
        });
      </script>

    </div>

<!-- JQkinetik -->
<script src="https://forumstatic.ru/files/0019/89/29/16999.js" type="text/javascript" charset="utf-8"></script>
<script src="https://forumstatic.ru/files/0019/89/29/15013.js" type="text/javascript" charset="utf-8"></script>
<script src="https://forumstatic.ru/files/0019/89/29/80983.js" type="text/javascript" charset="utf-8"></script>
<!-- JQkinetik -->