Simplest Slideshow
Download Source Code: Click Here to downloadOne of my Colleague was looking at doing a simple slideshow. The requirements were very straight forward like Images should MOVE sequentially after some Interval . I put my thinking cap on and decided to write a script from scratch. In the end, it turned out much simpler than even I predicted.Here you see how it looks like
You can customize it as per your requirement ..
HTML
Wrapper with div's as the "slides", which can contain any content.<div style="width: 500px; height: 300px;" id="simpleslider"> <a href="#" class="control_next">>></a> <a href="#" class="control_prev"><</a> <ul style="width: 2000px; margin-left: -500px; left: 0px;"> <li><img alt="" src="1.jpg"/></li> <li><img alt="" src="2.jpg"/></li> <li><img alt="" src="1.jpg"/></li> <li><img alt="" src="3.jpg"/></li> <li><img alt="" src="4.jpg"/></li> </ul> </div>
CSS
Slides need to be absolutely positioned within the wrapper.#simpleslider { position: relative; overflow: hidden; margin: 20px auto 0 auto; border-radius: 4px; } #simpleslider ul { position: relative; margin: 0; padding: 0; height: 200px; list-style: none; } #simpleslider ul li { position: relative; display: block; float: left; margin: 0; padding: 0; width: 500px; height: 300px; background: #ccc; text-align: center; line-height: 300px; } a.control_prev, a.control_next { position: absolute; top: 40%; z-index: 999; display: block; padding: 4% 3%; width: auto; height: auto; background: #2a2a2a; color: #fff; text-decoration: none; font-weight: 400; font-size: 18px; opacity: .4; cursor: pointer; } a.control_prev:hover, a.control_next:hover { opacity: 1; -webkit-transition: all 0.2s ease; } a.control_prev { border-radius: 0 2px 2px 0; } a.control_next { right: 0; border-radius: 2px 0 0 2px; } .slider_option { position: relative; margin: 10px auto; width: 160px; font-size: 18px; }
JQuery
<script type="text/javascript"> jQuery(document).ready(function ($) { $('#body').text(function(){ setInterval(function () { moveAhead(); }, 2000); }); var total_Slides= $('#simpleslider ul li').length; var width_Slide = $('#simpleslider ul li').width(); var hight_Slide = $('#simpleslider ul li').height(); var sliderUlWidth = total_Slides* width_Slide; $('#simpleslider').css({ width: width_Slide, height: hight_Slide }); $('#simpleslider ul').css({ width: sliderUlWidth, marginLeft: - width_Slide }); $('#simpleslider ul li:last-child').prependTo('#simpleslider ul'); function moveBack() { $('#simpleslider ul').animate({ left: + width_Slide }, 200, function () { $('#simpleslider ul li:last-child').prependTo('#simpleslider ul'); $('#simpleslider ul').css('left', ''); }); }; function moveAhead() { $('#simpleslider ul').animate({ left: - width_Slide }, 200, function () { $('#simpleslider ul li:first-child').appendTo('#simpleslider ul'); $('#simpleslider ul').css('left', ''); }); }; $('a.control_prev').click(function () { moveLeft(); }); $('a.control_next').click(function () { moveRight(); }); }); </script>
Complete Source Code:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> .slidebody { } </style> <style type="text/css"> #simpleslider { position: relative; overflow: hidden; margin: 20px auto 0 auto; border-radius: 4px; } #simpleslider ul { position: relative; margin: 0; padding: 0; height: 200px; list-style: none; } #simpleslider ul li { position: relative; display: block; float: left; margin: 0; padding: 0; width: 500px; height: 300px; background: #ccc; text-align: center; line-height: 300px; } a.control_prev, a.control_next { position: absolute; top: 40%; z-index: 999; display: block; padding: 4% 3%; width: auto; height: auto; background: #2a2a2a; color: #fff; text-decoration: none; font-weight: 400; font-size: 18px; opacity: .4; cursor: pointer; } a.control_prev:hover, a.control_next:hover { opacity: 1; -webkit-transition: all 0.2s ease; } a.control_prev { border-radius: 0 2px 2px 0; } a.control_next { right: 0; border-radius: 2px 0 0 2px; } .slider_option { position: relative; margin: 10px auto; width: 160px; font-size: 18px; } </style> <script src="jquery.js" type="text/javascript"></script> <title>new</title> <script type="text/javascript"> jQuery(document).ready(function ($) { $('#body').text(function(){ setInterval(function () { moveAhead(); }, 2000); }); var total_Slides= $('#simpleslider ul li').length; var width_Slide = $('#simpleslider ul li').width(); var hight_Slide = $('#simpleslider ul li').height(); var sliderUlWidth = total_Slides* width_Slide; $('#simpleslider').css({ width: width_Slide, height: hight_Slide }); $('#simpleslider ul').css({ width: sliderUlWidth, marginLeft: - width_Slide }); $('#simpleslider ul li:last-child').prependTo('#simpleslider ul'); function moveBack() { $('#simpleslider ul').animate({ left: + width_Slide }, 200, function () { $('#simpleslider ul li:last-child').prependTo('#simpleslider ul'); $('#simpleslider ul').css('left', ''); }); }; function moveAhead() { $('#simpleslider ul').animate({ left: - width_Slide }, 200, function () { $('#simpleslider ul li:first-child').appendTo('#simpleslider ul'); $('#simpleslider ul').css('left', ''); }); }; $('a.control_prev').click(function () { moveLeft(); }); $('a.control_next').click(function () { moveRight(); }); }); </script> </head> <body> <div id="simpleslider" style="height: 300px; width: 500px;"> <a class="control_next" href="https://www.blogger.com/blogger.g?blogID=8013485932946089823#">>></a> <a class="control_prev" href="https://www.blogger.com/blogger.g?blogID=8013485932946089823#"><</a> <ul style="left: 0px; margin-left: -500px; width: 2000px;"> <li><img alt="" src="1.jpg" /></li> <li><img alt="" src="2.jpg" /></li> <li><img alt="" src="1.jpg" /></li> <li><img alt="" src="3.jpg" /></li> <li><img alt="" src="4.jpg" /></li> </ul> </div> </body> </html>
Hope this helps...
Shabir