Free Web programing Tutorial

JQuery Image SlideShow with Easy Slider 1.5 

The Easy Slider plugin enables images or any content to slide horizontally or vertically on click. It is configurable with css alone. So, basically you link to plugin file, set the content up and style it with css.

Features

This version features:

    * auto slide
    * continuous sliding
    * "go to first" and "go to last" button
    * hiding controls
    * optional wrapping markup for control buttons
    * vertical sliding
    * multiple sliders on one page

How To Use Image Slideshow Easy Slider

Call Javascript in your blog
before call external javascript file

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.5.js"></script>

$(document).ready(function(){
			$("#slider").easySlider();
		});

Use This CSS style

#slider{}
	#slider ul, #slider li{
		margin:0;
		padding:0;
		list-style:none;
		}
	#slider li{
		/*
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/
		width:696px;
		height:241px;
		overflow:hidden;
		}
	#prevBtn, #nextBtn{
		display:block;
		width:30px;
		height:77px;
		position:absolute;
		left:-30px;
		top:71px;
		}
	#nextBtn{
		left:696px;
		}
	#prevBtn a, #nextBtn a{
		display:block;
		width:30px;
		height:77px;
		background:url(images/btn_prev.gif) no-repeat 0 0;
		}
	#nextBtn a{
		background:url(images/btn_next.gif) no-repeat 0 0;
		}

to using in HTML code

<div id="slider">
			<ul>
				<li><a href="#"><img src="images/01.jpg" alt="jQuery Image Slider" /></a></li>
				<li><a href="#"><img src="images/02.jpg" alt="jQuery Image Slider" /></a></li>
				<li><a href="#"><img src="images/03.jpg" alt="jQuery Image Slider" /></a></li>
				<li><a href="#"><img src="images/04.jpg" alt="jQuery Image Slider" /></a></li>
				<li><a href="#"><img src="images/05.jpg" alt="jQuery Image Slider" /></a></li>
			</ul>
		</div>

Download : EasySlider1.5
Demo : Easyslider Demo

Share on Facebook