LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

	
CSS
/*         Just for demo     */
body {
  padding: 10px;
  text-align: center;
}
#carousel-example-generic {
  display: inline-block;
}
/*****************************/

/* Plugin styles */
ul.thumbnails-carousel {
	padding: 5px 0 0 0;
	margin: 0;
	list-style-type: none;
	text-align: center;
}
ul.thumbnails-carousel .center {
	display: inline-block;
}
ul.thumbnails-carousel li {
	margin-right: 5px;
	float: left;
	cursor: pointer;
}
.controls-background-reset {
	background: none !important;
}
.active-thumbnail {
	opacity: 0.4;
}
.indicators-fix {
	bottom: 70px;
}
JS
// thumbnails.carousel.js jQuery plugin
;(function(window, $, undefined) {

	var conf = {
		center: true,
		backgroundControl: false
	};

	var cache = {
		$carouselContainer: $('.thumbnails-carousel').parent(),
		$thumbnailsLi: $('.thumbnails-carousel li'),
		$controls: $('.thumbnails-carousel').parent().find('.carousel-control')
	};

	function init() {
		cache.$carouselContainer.find('ol.carousel-indicators').addClass('indicators-fix');
		cache.$thumbnailsLi.first().addClass('active-thumbnail');

		if(!conf.backgroundControl) {
			cache.$carouselContainer.find('.carousel-control').addClass('controls-background-reset');
		}
		else {
			cache.$controls.height(cache.$carouselContainer.find('.carousel-inner').height());
		}

		if(conf.center) {
			cache.$thumbnailsLi.wrapAll("
"); } } function refreshOpacities(domEl) { cache.$thumbnailsLi.removeClass('active-thumbnail'); cache.$thumbnailsLi.eq($(domEl).index()).addClass('active-thumbnail'); } function bindUiActions() { cache.$carouselContainer.on('slide.bs.carousel', function(e) { refreshOpacities(e.relatedTarget); }); cache.$thumbnailsLi.click(function(){ cache.$carouselContainer.carousel($(this).index()); }); } $.fn.thumbnailsCarousel = function(options) { conf = $.extend(conf, options); init(); bindUiActions(); return this; } })(window, jQuery); $('.thumbnails-carousel').thumbnailsCarousel();

Description

While user slide left or right, appropriately thumbnail gets selected and change its opacity to be different among others thumbnails. User can also click on thumbnails to show the appropriate image on carousel.
Term
Mon, 11/27/2017 - 21:26

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv