Mobile-friendly Photo Slider In Pure JavaScript – gallery.js

Preview:

Description:

gallery.js is a pure JavaScript based photo slider which enables the user to swipe through a group of images like a carousel.

How to use it:

Import the JavaScript gallery.js and style sheet gallery.css into the html document.

<link rel="stylesheet" href="gallery.css">
<script src="gallery.js"></script>

Import the hammer.js library for the support of touch gestures.

<script src="/path/to/hammer.min.js"></script>

Add images to the slider.

• data-src: original image
• src: path to loading spinner

<div class="gallery-container">
  <div class="gallery-wrapper">
      <div class="gallery-slide" data-index="0">
          <img data-src="./images/1.JPG" src="./images/loading.gif" alt="" class="lazy">
      </div>
      <div class="gallery-slide" data-index="1">
          <img data-src="./images/2.JPG" src="./images/loading.gif" alt="" class="lazy">
      </div>
      <div class="gallery-slide" data-index="2">
          <img data-src="./images/3.jpg" src="./images/loading.gif" alt="" class="lazy">
      </div>
  </div>
  <div class="gallery-pagination"></div>
</div>

Create a new Gallery instance to initialize the slider.

var gallery = new Gallery('.gallery-container', {
    // options here
})

All possible slider options.

var gallery = new Gallery('.gallery-container', {
    // slide item
    slide: '.gallery-slide',
    // pagination container
    pagination: '.gallery-pagination',
    // is clickable
    paginationClickable: false,
    // zoom image on tap
    zoom: false,
    // auto resize
    resize: true,
    // infinite loop
    loop: false,
    // enable lazy load
    lazyLoading: false,
    // lazy loader container
    lazy: '.lazy'
    
})

Changelog:

07/08/2018

• Support base64

07/08/2018

• Fixed bug in only one image

07/06/2018

• JS & CSS update