Horizontal auto Image strip Scroller/Slider with speed control based on jQuery

Also visit 

Horizontal auto Image strip Scroller/Slider with speed control based on jQuery

Image slider is a widget or a pluggin by using which we can show several images on a specified area.

Hi guys here is another beautiful jQuery widget .This is an auto + click able vertical scroll Image or picture slider in any direction ( right or left ) direction.Further by using jQuery we make it more beautiful and light.Author is very creative( Credits are given below) he has given us three type of such image sliders they are all very beautiful and i will definitely try to introduce tutorial; to install them in your blogger blog easily first of all see the demo page below

View Demo

Please Download Scripts And Upload in Your Own Server Then use Direct Links to files In Below Code.
Where To Upload These Scripts ?Click Here To Know :)

• 
  Download Scripts!
  

Installation :

I have simplified the installation to a great extent.It is just a 2 step work :)


Step 1:

This is the HTML part use this to Display images which you want to show in your image scroll area.

<div id="content">

<div id="slider">
<ul>       
<li><a href="http://templatica.com/preview/30"><img alt="Css Template Preview" src="http://3.bp.blogspot.com/_9UnRubulkWQ/St2nkPL76fI/AAAAAAAAAAY/8PVUeYOzaMg/01.jpg"/></a></li>
<li><a href="http://templatica.com/preview/7"><img alt="Css Template Preview" src="http://4.bp.blogspot.com/_9UnRubulkWQ/St2nklUGGXI/AAAAAAAAAAg/zR-mtLaO7E8/02.jpg"/></a></li>
<li><a href="http://templatica.com/preview/25"><img alt="Css Template Preview" src="http://3.bp.blogspot.com/_9UnRubulkWQ/St2nlE0TBlI/AAAAAAAAAAo/YZ8KjYS5Guc/03.jpg"/></a></li>
<li><a href="http://templatica.com/preview/26"><img alt="Css Template Preview" src="http://1.bp.blogspot.com/_9UnRubulkWQ/St2nlsFPgfI/AAAAAAAAAAw/LBcS1zw3UcY/04.jpg"/></a></li>
<li><a href="http://templatica.com/preview/27"><img alt="Css Template Preview" src="http://2.bp.blogspot.com/_9UnRubulkWQ/St2nmLn2TFI/AAAAAAAAAA4/4SWp0QRF6d4/05.jpg"/></a></li>   
</ul>
</div></div>
<span style="font-size:4px;"><a href="http://bloggerplugnplay.blogspot.com/" target="_blank">Plug it</a></span>

Step 2:

This is Java script part

Login your BLOGGER account And click on Layout in the sub menu click EDIT HTML

Now find ]]></b:skin>


Paste the below code Below ]]></b:skin> code

<script src='http://bloggerplugnplay-files.bravehost.com/jquery.js' type='text/javascript'/>
<script src='http://bloggerplugnplay-files.bravehost.com/easySlider1.7.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#slider&quot;).easySlider({
auto: true,
continuous: true
});
});
</script>

<link href='http://bloggerplugnplay-files.bravehost.com/screen.css' media='screen' rel='stylesheet' type='text/css'/>

Save your Template !

Credits : Author: Css Globe Distributed for Blogger Blogger Plug n Play