Mobile-friendly Pure Javascript Photo Slider

Category: Slideshow | July 8, 2018
Pure Javascript Photo Slider
Author: allenou
Official Page: Go to Website
Last Update:August 31, 2019
License:MIT

Easy to understand tutorial about creating a pure Javascript photo slideshow with the help of Gallery.js plugin. It enables users to swipe images like a carousel.

Another cool thing the slider is mobile friendly and easy to use. It comes with fade-in animation and dot navigation to change each slide.

Furthermore, the slider is simple in layout and don’t have too many fancy things. But it comes with a lot of options which gives you the ability to customize it as you want.

The process of customizations is easy. All you have to change variable values and you are done. In addition, you can easily make it full screen or full width by just calling the code without a fixed container.

If you are already using a responsive template then you can simply copy/paste it’s HTML code to make work with existing coding.

How to Make Image Slider in Pure Javascript

It is easy to implement and you simply need to call two main files. The first one is the jquery file and the second one is the CSS file which includes the responsive media queries.

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

Also, Make sure to import hammer.js library for mobile and touch support.

<script src="https://cdn.bootcss.com/hammer.js/2.0.8/hammer.min.js"></script>

Each photo should be defined instead of the gallery-side DIV. You need to define two HTML5 data attribute. The first one is data-src where you need to define the image path.

The next one is used for loading spinner and it needs to add into src attribute.

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

Finally, Create the gallery initialize to initialize the photo slider. You can change the options you want. Simply make the value true to activate the specific option.

var gallery = new Gallery('.gallery-container', {
    pagination: '.gallery-pagination',
    paginationClickable: true,
    zoom: true,
    loop: false,
    lazyLoading: true,
    base64: true
})

That’s It!

You May Also Like

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.