jCarousel Horizontal with pagination

jCarousel Horizontal with pagination

HTML

<script src="https://rawgithub.com/jsor/jcarousel/master/dist/jquery.jcarousel-autoscroll.min.js"></script>
<script src="https://rawgithub.com/jsor/jcarousel/master/dist/jquery.jcarousel-control.min.js"></script>
<script src="https://rawgithub.com/jsor/jcarousel/master/dist/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/jsor/jcarousel/master/examples/responsive/jcarousel.responsive.css">
<script src="http://sorgalla.com/jcarousel/dist/jquery.jcarousel-pagination.min.js?raw=1"></script>
<div class="jcarousel-wrapper">
	<div class="jcarousel">
		<ul>
            <li><span class="photo"></span></li>
			<li><span class="photo"></span></li>
			<li><span class="photo"></span></li>
			<li><span class="photo"></span></li>
			<li><span class="photo"></span></li>
			<li><span class="photo"></span></li>
		</ul>
	</div>

	<a href="#" class="jcarousel-control-prev">&lsaquo;</a>
	<a href="#" class="jcarousel-control-next">&rsaquo;</a>

	<p class="jcarousel-pagination"></p>
</div>

CSS

.photo {
    width:100px;
    height:100px;
    background:blue;
    display:block;
}

.active {
    background:#000;
}

JavaScript

jQuery('.jcarousel').jcarousel({
    wrap:'circular',
});

jQuery('.jcarousel-control-prev').jcarouselControl({
	target: '-=1'
});

jQuery('.jcarousel-control-next').jcarouselControl({
	target: '+=1'
});

jQuery('.jcarousel-pagination').jcarouselPagination({
    perPage:1
});

jQuery('.jcarousel-pagination a').eq(0).addClass('active');

jQuery('.jcarousel-pagination').on('jcarouselpagination:active', 'a', function(e) {
    jQuery(e.currentTarget).addClass("active");
});

jQuery('.jcarousel-pagination').on('jcarouselpagination:inactive', 'a', function(e) {
    jQuery(e.currentTarget).removeClass("active");
});