scrobot,
а доку почитать?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Carousel - jCarousel Examples</title>
<base href="http://sorgalla.com/jcarousel/examples/responsive/" />
<!-- Shared assets -->
<link rel="stylesheet" type="text/css" href="_shared/css/style.css">
<!-- Example assets -->
<link rel="stylesheet" type="text/css" href="jcarousel.responsive.css">
<script type="text/javascript" src="../../libs/jquery/jquery.js"></script>
<script type="text/javascript" src="../../dist/jquery.jcarousel.min.js"></script>
<style type="text/css">
.jcarousel img.active{
border: #FF0000 4px solid;
border-radius: 4px;
width: 92%;
height: 92%;
}
</style>
<script>(function($) {
$(function() {
var jcarousel = $('.jcarousel');
jcarousel
.on('jcarousel:reload jcarousel:create', function () {
var width = jcarousel.innerWidth();
if (width >= 600) {
width = width / 5;
} else if (width >= 350) {
width = width / 2;
}
jcarousel.jcarousel('items').css('width', width + 'px');
})
.jcarousel({
wrap: 'circular'
});
$('.jcarousel-control-prev')
.jcarouselControl({
target: '-=1'
});
$('.jcarousel-control-next')
.jcarouselControl({
target: '+=1'
});
$('.jcarousel-pagination')
.on('jcarouselpagination:active', 'a', function() {
$(this).addClass('active');
})
.on('jcarouselpagination:inactive', 'a', function() {
$(this).removeClass('active');
})
.on('click', function(e) {
e.preventDefault();
})
.jcarouselPagination({
perPage: 1,
item: function(page) {
return '<a href="#' + page + '">' + page + '</a>';
}
});
$('.jcarousel')
.on('jcarousel:animateend', function(event, carousel) {
var visible = $('.jcarousel').jcarousel('visible');
$('img', '.jcarousel').removeClass('active') // $('li', '.jcarousel').removeClass('active')
$('img',visible.eq(2)).addClass('active'); // visible.eq(2).addClass('active');
});
});
})(jQuery);
</script>
</head>
<body>
<div class="wrapper">
<h1>Responsive Carousel</h1>
<p>This example shows how to implement a responsive carousel. Resize the browser window to see the effect.</p>
<div class="jcarousel-wrapper">
<div class="jcarousel">
<ul>
<li><img src="../_shared/img/img1.jpg" alt="Image 1"></li>
<li><img src="../_shared/img/img2.jpg" alt="Image 2"></li>
<li><img src="../_shared/img/img3.jpg" alt="Image 3" class="active"></li>
<li><img src="../_shared/img/img4.jpg" alt="Image 4"></li>
<li><img src="../_shared/img/img5.jpg" alt="Image 5"></li>
<li><img src="../_shared/img/img6.jpg" alt="Image 6"></li>
</ul>
</div>
<a href="#" class="jcarousel-control-prev">‹</a>
<a href="#" class="jcarousel-control-next">›</a>
<p class="jcarousel-pagination"></p>
</div>
</div>
</body>
</html>