Minimal Horizontal Scroller Plugin For jQuery - los-scrollos

los-scrollos is a lightweight and touch-enabled jQuery horizontal scroller plugin which hides the overflowing content and generates next and prev controls to scroll through your long web content. You can also scroll through the web page via touch swipe on mobile devices.

How to use it:

1. Insert jQuery library (slim build) and the jQuery scrollos.js plugin's files in the document.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>
<script src="dist/scrollos.js"></script>
<link rel="stylesheet" href="dist/scrollos.css">

2. Add next and prev buttons to your long web content.

<div class="scrollos-wrapper" id="demo">
  <div class="scrollos-container" data-overflowing="none">
    <div class="scrollos-content">
      <div class="item">
        <div class="img-box">
          <img src="http://via.placeholder.com/300x90">
        </div>
      </div>
      <div class="item">
        <div class="img-box">
          <img src="http://via.placeholder.com/300x90">
        </div>
      </div>
      <div class="item">
        <div class="img-box">
          <img src="http://via.placeholder.com/300x90">
        </div>
      </div>
      ...
    </div>
  </div>
  <button class="scrollos-nav scrollos-prev">prev</button>
  <button class="scrollos-nav scrollos-next">next</button>
</div>

3. Call the function Scrollos() on the top container and done.

$( function() {
  $( "#demo" ).Scrollos();
});

4. Set the distance in pixels on each scroll.

$( function() {
  $( "#demo" ).Scrollos({
    scrollDistance: 212
  });
});

---

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