Sticky Image Slider With jQuery - Horizontal Scroll Gallery

A jQuery plugin to create a horizontal slider that can slide through images when scrolling up/down the webpage.

It uses CSS position:sticky property to pin the slider on the page until the last or first image has been scrolled over.

The plugin will automatically detect the height of the tallest image and apply that height to the slider.

How to use it:

1. Add images to the slider.

<div class="horizontal-scroll">
  <div class="example">
    <img src="1.jpg" alt="Image Alt">
    <p>Example caption</p>
  </div>
  <div class="example">
    <img src="2.jpg" alt="Image Alt">
    <p>Example caption</p>
  </div>
  <div class="example">
    <img src="3.jpg" alt="Image Alt">
    <p>Example caption</p>
  </div>
  <div class="example">
    <img src="4.jpg" alt="Image Alt">
    <p>Example caption</p>
  </div>
  <div class="example">
    <img src="5.jpg" alt="Image Alt">
    <p>Example caption</p>
  </div>
  ....
</div>

2. Include the JavaScript file jquery-horizontal-scroll.min.js after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/jquery-horizontal-scroll.min.js"></script>

3. Call the function horizontalScroll on the slider container and you're done.

$(document).ready(function() {
  $('.horizontal-scroll').horizontalScroll({
    // options here
  });
});

4. There are a few options that can be used to customize the slider.

$('.horizontal-scroll').horizontalScroll({

  // container height
  "containerHeight": "300vh",

  // image height
  "itemsHeight": base.maxHeight,

  // slider width
  "width": base.sumWidths.toString() + "px",

  // top padding
  "paddingTop": base.paddingTop,

  // left padding
  "paddingLeft": base.paddingLeft,
  
});

---

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