Minimal Dynamic Slideshow JavaScript Library

Demo Download

Author:	niloofarfs
Views Total:	7,050 views
Official Page:	Go to website
Last Update:	October 25, 2016
License:	MIT

Preview:

Minimal Dynamic Slideshow JavaScript Library

Description:

A minimal, pure JavaScript slideshow that allows to dynamically load as many images using JavaScript.

How to use it:

Load the Font Awesome 4 for the prev/next icons.

<link rel="stylesheet" href="font-awesome.min.css">

Markup html structure.

<body onload="sliderTimer()">
<div id="slider">
  <div class="icon" id="left"><i class="fa fa-angle-left" onclick="prev()"></i></div>
  <h2 id="sliderHeader">First Heading</h2>
  <p id="sliderPara">First paragraph is awesome!</p>
  <div class="icon" id="right"><i class="fa fa-angle-right" onclick="next()"></i></div>
</div>
</body>

Load the main JavaScript file at the bottom of the webpage.

<script src="script.js"></script>

Define image paths and descriptions in the JavaScript as follows:

var imgadr= ['1.jpg','2.jpg','3.jpg','4.jpg'];
var headArray= ['First Heading','Second Heading', 'Third Heading', 'Last heading'];
var paraArray= ['First paragraph is awesome!',
    'Second paragraph goes here!', 
    'Third paragraph for you',
     'Last but not least important paragraph!'];