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.
Tweet
<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>
<link rel="stylesheet" media="screen" href="css/slideshow.css" type="text/css" />
<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>
<script type="text/javascript">
$(document).ready(function()
{
slideshow({
rootElement: 'slideshow', //identificator of slideshow HTML container
w: 800, //width of of slideshow HTML container in px
h: 300, //height of of slideshow HTML container in px
autoplay: true //turn on autoplay mode
});
});
</script>
If you find a bug, create an issue on GitHub. Include your operating system and browser version along with detailed steps to reproduce the bug.
If you want a feature added, please create an issue on GitHub. Someone else or I might be able to help out. No guarantees.
If you have a question that is not a bug or a feature request, your best chance of getting an answer is contact me on hello[at]beedigital.sk.
© 2013 Tomáš Mahrík | BLOG | BEE DIGITAL