Картинка пока одна, да, но там же всё равно должно быть заметно движение, когда сменяются изображения.
Делала по аналогии с нижней каруселью на этом сайте
http://roll.inetech.ru/
А что до кода, то в хеде я ссылаюсь на css
<link rel="stylesheet" href="/style/jcarousel.css" type="text/css" media="screen" />
в скриптах я прописываю
<script src="/js/jquery-1.7.1.min.js"></script>
<script src="/js/jquery.jcarousel.min.js"></script>
<script type="text/javascript">
function brandcarousel_initCallback(carousel)
{
// Disable autoscrolling if the user clicks the prev or next button.
carousel.buttonNext.bind('click', function() {
carousel.startAuto(0);
});
carousel.buttonPrev.bind('click', function() {
carousel.startAuto(0);
});
// Pause autoscrolling if the user moves with the cursor over the clip.
carousel.clip.hover(function() {
carousel.stopAuto();
}, function() {
carousel.startAuto();
});
};
jQuery(document).ready(function() {
jQuery('#brandcarousel').jcarousel({
auto: 2,
wrap: 'circular',
scroll: 1,
visible: 1,
animation: 2500,
buttonNextHTML: null,
buttonPrevHTML: null,
initCallback: brandcarousel_initCallback,
itemFallbackDimension: 100
});
});
</script>
и уже в боди прописываю
<ul id="brandcarousel" class="jcarousel-skin-brandcarousel">
<li><img width="449px" height="190px" src="/images/s_pic.jpg" /></li>
<li><img width="449px" height="190px" src="/images/s_pic.jpg" /></li>
<li><img width="449px" height="190px" src="/images/s_pic.jpg" /></li>
</ul>
вот, например, прописанная таким образом карусель, она работает
http://jsfiddle.net/6EmsT/3/
а что не так с моей, я понять не могу.