jQuery Plugin for Horizontally Sticky Image Scrolling Slider | Horizontal Scroll Gallery

jQuery Horiztonal Scroll Gallery is a jQuery plugin that slides through a horizontal gallery of items as you scroll down. It uses position: pinned so that the gallery is briefly fixed in place while scrolling horizontally.

jquery automatic image slider free download, jquery banner slider, jquery image slider, jquery image slider code, jquery image slider free download with source code

Use:

The gallery should be an HTML element with some child elements one level down. It will take those first-level kids, and auto-set them into a movie stripe element with all the right CSS, so there’s not much to do other than add the HTML. Child elements can be images, div tags, or whatever. The height of the film strip will depend on the longest item found.

How to make use of 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 also you’re completed.

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

4. There are just a few choices that can be utilized 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,
  
});

Sticky Image Slider With jQuery, jQuery Horiztonal Scroll Gallery Plugin/Github, responsive slider jquery free download with demo, jquery image slider plugin, jquery thumbnail slider horizontal