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

jQuery Horizontal 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.

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.

Must Read: Vertical Page Slider Scrolling With Parallax Effect | FullPageScroll

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.

$(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,
  
});

Must Read: [Infinite] A Carousel Slideshow That Uses Vanilla JavaScript and CSS | Continuous Slider

Options

You will not need to add these additional options. In most cases, they are detected automatically. But I’m putting it here in case someone wants to override the default settings.

  • containerHeight – the height of the container, which requires more scrolling.
  • itemsHeight – automatically depends on the longest item it finds, but you can set it yourself. The hidden overflow property will cut off anything prominent if you set it to smaller than an element.
  • width – The width of the item bar. It is automatically based on the number of items multiplied by the width of the parent container.
  • paddingTop – automatically detects if you have padding on the container. But this will affect the point where the adhesion catches.
  • paddingLeft – Automatically detects, but if padding is left on the container, it will ensure that it goes from the start location of the film strip.

Read More – 

Horizontal Smooth Scrolling Parallax Slider in Vanilla JavaScript
Responsive & Flickable Carousels Content Slider Plugin | flickity


See Demo And Download

Official Website(jrue): Click Here

This superior jQuery/javascript plugin is developed by jrue. For extra Advanced Usage, please go to the official website.

Share