This is just an easy to use image slider for your webpage.We are using jCarousel which is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation)..Just copy and paste the codes below.We have even a demo available.Grab it NOW!!!!!

Javascript Part

<script src='http://mistonline.in/jquery/jquery_new.js' type='text/javascript'></script>
<script src='http://mistonline.in/jquery/jquery.jcarousel.pack.js' type='text/javascript'></script>
<script src='http://mistonline.in/jquery/jquery-ui-personalized-1.5.2.packed.js' type='text/javascript'></script>

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
wrap:"both",
scroll:2,
animation:"slow"
});
function mycarousel_initCallback(carousel) {
jQuery('#featured-next-button').bind('click', function() {
carousel.next();
return false;
});

jQuery('#featured-prev-button').bind('click', function() {
carousel.prev();
return false;
});
jQuery('.button-nav span').bind('click', function() {
carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
return false;
});
};
jQuery('#feature-carousel').jcarousel({
wrap:"both",
scroll:1,
auto:10,
initCallback: mycarousel_initCallback,
buttonNextHTML: null,
buttonPrevHTML: null
});

});
</script>

CSS part

<style type="text/css">
.jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;}

.jcarousel-skin-tango .jcarousel-container-horizontal {width: 941px;margin: 0 auto;padding:0 20px;}

.jcarousel-skin-tango .jcarousel-clip-horizontal {width:  941px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item {width: 307px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;}
.jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;}

.jcarousel-skin-tango .jcarousel-next-horizontal {
background:transparent url(http://3.bp.blogspot.com/_pZaV-NlP_3s/TFAMVbjDoRI/AAAAAAAAAGc/qVMBXOUAnnY/s1600/image-slider-button.png) no-repeat scroll -46px 0;
cursor:pointer;
height:254px;
right:20px;
position:absolute;
top:0;
width:46px;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
background:transparent url(http://3.bp.blogspot.com/_pZaV-NlP_3s/TFAMVbjDoRI/AAAAAAAAAGc/qVMBXOUAnnY/s1600/image-slider-button.png) no-repeat scroll 0 0;
cursor:pointer;
height:254px;
left:20px;
position:absolute;
top:0;
width:46px;
}

.jcarousel-container {position: relative;}
.jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;}
.jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;}
.jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;}
.jcarousel-next {z-index: 3;display: none;}
.jcarousel-prev {z-index: 3;display: none;}

#news-slider{background-color:#FFFFFF;padding:20px 0;}
#news-slider img{border:none;height:254px;width:307px;}
</style>

The main HTML part

<div id='news-slider'>
<ul class='jcarousel-skin-tango' id='mycarousel'>
<li><a href='#'><img src='http://mistonline.in/jquery/image1.jpg'/></a></li>
<li><a href='#'><img src='http://mistonline.in/jquery/image2.jpg'/></a></li>
<li><a href='#'><img src='http://mistonline.in/jquery/image3.jpg'/></a></li>
<li><a href='#'><img src='http://mistonline.in/jquery/image4.jpg'/></a></li>
<li><a href='#'><img src='http://mistonline.in/jquery/image5.jpg'/></a></li>
<li><a href='#'><img src='http://mistonline.in/jquery/image6.jpg'/></a></li>
</ul>
</div>

Here is the DEMO

Incoming search terms:

• horizontal image slider using jquery (14)
• simple jquery image slider (11)
• simple image slider (8)
• jcarousel-skin-tango demo (6)
• jcarousel slider (5)
• jcarousel-skin-tango slider (5)
• simple jcarousel tutorial (4)
• simple jquery slider (3)
• simple image slider jquery (2)
• simple image scroll jquery script with prev next button (1)
• php script images mysql carousel (1)
• simple image slider in w3school (1)
• easy jquery image slider (1)
• simple jcrousel (1)
• simple jquery to scroll images (1)
• simple scroll slider (1)
• tutorial simple jquery slider (1)
• w3school carousel slider (1)
• mysql load ajax carousel slider (1)
• jquery slider jcarousel-clip (1)
• horizontal image slider ajax (1)
• horizontal image slider in jquery (1)
• horizontal image slider with pre next button (1)
• horizontal image slider with prev next click in div (1)
• image slider using javascript (1)
• image slider with jCarousel (1)
• javascript text and img slaider (1)
• jcarousel clip jcarousel clip horizontal (1)
• jcarousel image in main (1)
• jcarousel-skin-tango (1)
• jcarousel-skin-tango jquery slider (1)
• jQuery horizontal image carousel (1)
• jquery img scoll next prev (1)
• w3school slider (1)