Last updated on May 20th, 2016 at 03:39 pm
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
admin
very good