carouFredSel 2

Official site:

  1. Download:
    http://docs.dev7studios.com/jquery-plugins/caroufredsel
  2. Documentation:
    http://docs.dev7studios.com/jquery-plugins/caroufredsel

HTML:

<div id="photo_form_thumbs" class="thumbs_container">
  <div id="thumbs_wrapper" class="thumbs_wrapper">
	<ul class="photos" data-post-id="0">
	</ul>
  </div>
  <div class="clearfix"></div>
  <a href="#" id="post_nav_left" class="carousel_nav left"></a>
  <a href="#" id="post_nav_right" class="carousel_nav right"></a>
</div>

Javascript:

$(document).ready(function(){
	$('.slides').each(function(index){
		var $carousel = $(this);
		var $panel = $('.panel').has($carousel);
		var total = $carousel.children().size();
		var current = 1;

		$panel.find('.pagination .total').html(total);
		$panel.find('.pagination .current').html(current);

		$carousel.carouFredSel({
			auto: false,
			width:'100%', 
			height: 'auto', 
			circular: false,
			infinite: false,
			responsive: true,
			items:{
		    	visible: 1
		    }, 
		    prev    : { 
				button  : $panel.find(".slide_nav.left"),
				key     : "left"
			},
			next    : { 
				button  : $panel.find(".slide_nav.right"),
				key     : "right"
			}, 
			scroll: {
				onAfter: function(data){
					current = $carousel.triggerHandler("currentPage") + 1;//From 0
					$panel.find('.pagination .current').html(current);
				}
			}
		});
	});
});

Trigger events:

$carousel.trigger('insertItem', new_item);

$carousel.trigger('destroy');
var new_item = '<li><a href="' + large + '" data-id="' + item.image_id + '" class="fancybox image" rel="gallery"><img src="' + thumb + '" /></a><a href="#" class="remove" data-id="' + item.image_id + '"><span class="glyphicon glyphicon-remove"></span></a></li>';

$carousel.trigger('insertItem', new_item);

 

CSS:

/* Important! Image must be have specific size */
.gallery li a img{
  width: 100px;
  height: 100px;
}