Simple Responsive Image Slideshow Plugin – slideshow.js

by Posted on

Simple Responsive Image Slideshow Plugin – slideshow.js
Slideshow makes your website awesome and if you use slideshow feature on your website you can display more images and content in single div container . Here I am going to share A simple pure javascript slideshow Responsive and usable for both images and other HTML-content. Using this plugin you not only slide images but also slide images with content. It is helpful for adding news slideshow feature on your website.

Image Slideshow



Integrate Simple Responsive Image Slideshow

Libraries

This plugin is independent and purely written in core javascript so you don’t required any third party library with this slideshow plugin.

<!--CSS-->
<link rel="stylesheet" href="slideshow.css"/>
 
<!--JS-->
<script language="javascript" src="slideshow.js"></script>

HTML

Put your all images together with next / prev navigation and counter to the HTML section element where need to make all div slid-able. by clicking on next / prev navigation link you can change the slide and counter will display on which slide you are on.

<section class="slideshow-images js-slideshow-images">
        <nav>
            <button class="slideshow-nav slideshow-nav--prev js-slideshow-previous"></button>
            <button class="slideshow-nav slideshow-nav--next js-slideshow-next"></button>
        </nav>
        <div class="slideshow-container js-slideshow-container">
            <div class="slideshow-slide js-slideshow-slide">
                <img class="slideshow-slide--image" src="cat1.jpeg"/>
            </div>
            <div class="slideshow-slide js-slideshow-slide">
                <img class="slideshow-slide--image" src="cat2.jpeg"/>
            </div>
            <div class="slideshow-slide js-slideshow-slide">
                <img class="slideshow-slide--image" src="cat3.jpeg"/>
            </div>
        </div>
        <aside>
            <div class="slideshow-counter js-slideshow-counter"></div>
        </aside>
    </section>



JS

Finally Initialize the slideshow plugin to make slideshow ON. You can also customize your slide to by using custom options.

 var slideshowImages = Slideshow();
 slideshowImages.init('.js-slideshow-images', true); // set false to disable the infinite looping.

See live demo and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.



Published by admin