Digital Slideshow (jQuery Plugin)

Nowadays you can find on the Internet many slideshow plugins using jQuery or other libraries based on Javascript. Some are better some are worse but in some
specific cases is better create own solution (development of own solution takes much more time but usually it's much more easier to extend plugin and during development process you can learn many new things).
For landing page for our next mobile project Teach Me Apps I developed easy slideshow plugin using jQuery library which I gave code name Digital Slideshow.

I decided to share with you full code of this plugin. You can plugin to extend and also use this plugin or code snippet in your opensource and commercial projects without any restrictions. If you like
this plugin please share this page with other or support us with your like or tweet on our BLOG or Official Website.

Download last version of Digital Slideshow

Example of Digital Slideshow:

How to use: Step by step instructions

1. Download and unzip the latest version of Digital Slideshow from GitHub. You can choose from uncompressed and minified version.
2. Look inside the js folder where you will find jquery-x.x.x.min.js and slideshow-x.x.x.js. Copy this folder with this 2 files to
root of your server (use same file hierarchy otherwise you will have to edit file paths) and put this code snippet to header of your main HTML page. jQuery library
have to be loaded first before slideshow-x.x.x.js.
<script type="text/javascript" src="js/jquery-2.0.2.min.js"></script>
<script type="text/javascript" src="js/slideshow-1.0.0.js"></script>
3. Look inside folder css where you will find slideshow.css. Copy this folder to root of your server (use same file hierarchy otherwise you will have to edit file paths) and put this code snippet to header of your HTML page.
<link rel="stylesheet" media="screen" href="css/slideshow.css" type="text/css" />
4. Look inside folder images/default/ where you find files arrow_left.png, arrow_right.png, nav_active.png, nav_unactive.png and ,transparent.png. These files
are used in stylesheet file slideshow.css. By default slideshow.css will look for these images in folder called images/default/. Copy this folder to root of your server (use same file hierarchy otherwise you will have to edit file paths).
5. Put this HTML code snippet to body of main HTML page. Every image tag contains special attributes data-label and data-text where you can define label and description text if you want show description box for slide.
<div id="slideshow">
<div class="slides">
<img src="slider/1.png" alt="image1" data-label="Slide Label 1" data-text="Slide Text 1" />
<img src="slider/2.png" alt="image2" data-label="" data-text="" />
<img src="slider/3.png" alt="image3" data-label="Slide Label 3" data-text="Slide Text 3" />
<img src="slider/4.png" alt="image4" data-label="Slide Label 4" data-text="Slide Text 4" />
<div class="description"></div>
<div class="preloader"></div>
</div>
<div class="navigation"></div>
</div>6. And last step we have to initialize slideshow plugin. So put this javascript code snippet to header of HTML page:
<script type="text/javascript">