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

Category: Javascript , Slider | July 8, 2018
Views Total:640 views
Official Page:Go to website
Last Update:July 8, 2018


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


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 class="gallery-slide" data-index="1">
          <img data-src="./images/2.JPG" src="./images/loading.gif" alt="" class="lazy">
      <div class="gallery-slide" data-index="2">
          <img data-src="./images/3.jpg" src="./images/loading.gif" alt="" class="lazy">
  <div class="gallery-pagination"></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'



  • Support base64


  • Fixed bug in only one image


  • JS & CSS update

You Might Be Interested In:

Leave a Reply