<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>jCarousel Examples</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--
jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<!--
jCarousel library
-->
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<!--
jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="skins/tango/skin.css" />
<style type="text/css">
/**
* Additional styles for the controls.
*/
.jcarousel-control {
margin-bottom: 10px;
text-align: center;
}
.jcarousel-control a {
font-size: 75%;
text-decoration: none;
padding: 0 5px;
margin: 0 0 5px 0;
border: 1px solid #fff;
color: #eee;
background-color: #4088b8;
font-weight: bold;
}
.jcarousel-control a:focus,
.jcarousel-control a:active {
outline: none;
}
.jcarousel-scroll {
margin-top: 10px;
text-align: center;
}
.jcarousel-scroll form {
margin: 0;
padding: 0;
}
.jcarousel-scroll select {
font-size: 75%;
}
#mycarousel-next,
#mycarousel-prev {
cursor: pointer;
margin-bottom: -10px;
text-decoration: underline;
font-size: 11px;
}
</style>
<script type="text/javascript">
/**
* We use the initCallback callback
* to assign functionality to the controls
*/
function mycarousel_initCallback(carousel) {
jQuery('.jcarousel-control a').bind('click', function() {
carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
return false;
});
jQuery('#mycarousel-next').bind('click', function() {
carousel.next();
return false;
});
jQuery('#mycarousel-prev').bind('click', function() {
carousel.prev();
return false;
});
};
// Ride the carousel...
jQuery(document).ready(function() {
jQuery("#mycarousel").jcarousel({
scroll: 1,
auto: 2,
wrap: 'circular',
initCallback: mycarousel_initCallback,
// This tells jCarousel NOT to autobuild prev/next buttons
buttonNextHTML: null,
buttonPrevHTML: null
});
});
</script>
</head>
<body>
<div id="wrap">
<h1>jCarousel</h1>
<h2>Riding carousels with jQuery</h2>
<h3>Carousel with external controls</h3>
<p>
This carousel shows how to control it from outside.
</p>
<div id="mycarousel" class="jcarousel-skin-tango">
<ul>
<li><img width="590" height="270" src="http://kashpo/images/pic13.jpg" alt="" /></li>
<li><img width="590" height="270" src="http://kashpo/images/pic13.jpg" alt="" /></li>
<li><img width="590" height="270" src="http://kashpo/images/pic13.jpg" alt="" /></li>
<li><img width="590" height="270" src="http://kashpo/images/pic13.jpg" alt="" /></li>
<li><img width="590" height="270" src="http://kashpo/images/pic13.jpg" alt="" /></li>
</ul>
</div>
<div class="jcarousel-control">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
</div>
</div>
</body>
</html>
вот html, у меня всё работает