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

Category: Javascript , Slider | November 14, 2017
Author: allenou
Views Total: 47
Official Page: Go to website
Last Update: November 14, 2017
License: MIT

Preview:

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

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'
    
})