Ответ на этот вопрос можно легко найти на первых страницах документации jCarousel, но хорошо, я скопирую его здесь для вас;)
Прежде всего загрузите jCarousel и добавьте все источники в ваш тег <head>
.
<script type="text/javascript" src="/path/to/jquery-1.2.1.pack.js"></script>
<script type="text/javascript" src="/path/to/lib/jquery.jcarousel.pack.js"></script>
<link rel="stylesheet" type="text/css" href="/path/to/lib/jquery.jcarousel.css" />
<link rel="stylesheet" type="text/css" href="/path/to/skin/skin.css" />
Затем в том месте, где вы хотите, чтобы ваша карусель поместила этот код.
<ul id="mycarousel" class="jcarousel-skin-name">
<!-- The content goes in here -->
</ul>
Затем добавьте код js для инициализации вашей карусели.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
// Carousel gonna be vertical
vertical : true,
// AJAX callback
itemLoadCallback: itemLoadCallbackFunction
});
});
</script>
Затем вам нужно создать itemLoadCallBackFunction, чтобы фактически загружать новые элементы в карусель динамически. Обычно, как только вы получаете какой-то элемент с индексом i
, вы просто вставляете его в карусель с помощью carousel.add(i, item)
.
UPD:
Здесь - это пример с PHP-скриптом внутри, вы можете получить вдохновение оттуда.