Advanced JQuery Carousel

Developer
Boyd Massie
Size
10,599 Kb
Views
14,168
  1. Advanced JQuery Carousel Previews
  2. Advanced JQuery Carousel HTML Codes
  3. Advanced JQuery Carousel CSS Codes
  4. Advanced JQuery Carousel JS Codes

How do I make an advanced jquery carousel?

JQuery carousel with a count function to let visitor know how many items there are.. What is a advanced jquery carousel? How do you make a advanced jquery carousel? This script and codes were developed by Boyd Massie on 28 November 2022, Monday.

Advanced JQuery Carousel Previews
IQ Test

Advanced JQuery Carousel - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Advanced JQuery Carousel</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script type="text/javascript" src="https://code.jquery.com/jquery-latest.pack.js"></script>
<script src="https://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<div id="relatedByThis"> <div class="relatedHeadlineHolder"> <!--<div id="headlineRelatedWhyLove"> <h3>Why We Love This Innovator</h3> </div>--> <div id="byThisCarouselCounter">Showing</div> <div class="clear"></div> </div> <div class="relatedVideosHolder" style="width:926px;"> <ul id="byThisCarousel" class="jcarousel-skin-thf_related"> <li> <div class="thumbHolder"> <div class="thumbImage"><img src="https://www.artgallery.nsw.gov.au/media/thumbnails/collection_images/8/8281%23%23S.jpg.112x165_q85.jpg" width="112" height="164" alt="" /></div> <div class="thumbContent"> <h4><a href="javascript:void()" rel="http://">One</a></h4> </div> </div> </li> <li> <div class="thumbHolder"> <div class="thumbImage"><img src="http://camelotbooks.com/images/sized/uploads/blatty_dimiter-112x165.jpg" width="112" height="165" alt="" /></div> <div class="thumbContent"> <h4><a href="javascript:void()" rel="http://">Two</a></h4> </div> </div> </li> <li> <div class="thumbHolder"> <div class="thumbImage"><img src="http://camelotbooks.com/images/sized/uploads/antho_dark_delicacies-112x165.jpg" width="112" height="165" alt="" /></div> <div class="thumbContent"> <h4><a href="javascript:void()" rel="http://">Three</a></h4> </div> </div> </li> <li> <div class="thumbHolder"> <div class="thumbImage"><img src="http://camelotbooks.com/images/sized/uploads/bacigalupi_alchemist-112x165.jpg" width="112" height="165" alt="" /></div> <div class="thumbContent"> <h4><a href="javascript:void()" rel="http://">Four</a></h4> </div> </div> </li> <li> <div class="thumbHolder"> <div class="thumbImage"><img src="http://camelotbooks.com/images/sized/uploads/smith_everything_you_need-112x165.jpg" width="112" height="165" alt="" /></div> <div class="thumbContent"> <h4><a href="javascript:void()" rel="http://">Five</a></h4> </div> </div> </li> <li> <div class="thumbHolder"> <div class="thumbImage"><img src="http://camelotbooks.com/images/sized/uploads/moore_congregations_of_the_dead-112x165.jpg" width="112" height="165" alt="" /></div> <div class="thumbContent"> <h4>Six</h4> </div> </div> </li> <li> <div class="thumbHolder"> <div class="thumbImage"><img src="http://camelotbooks.com/images/sized/uploads/shepard_beautiful_blood-112x165.jpg" width="112" height="165" alt="" /></div> <div class="thumbContent"> <h4>Seven</h4> </div> </div> </li> <li> <div class="thumbHolder"> <div class="thumbImage"><img src="http://camelotbooks.com/images/sized/uploads/abercrombie_the_heores-112x165.jpg" width="112" height="165" alt="" /></div> <div class="thumbContent"> <h4>Eight</h4> </div> </div> </li> <li> <div class="thumbHolder"> <div class="thumbImage"><img src="http://camelotbooks.com/images/sized/uploads/abraham_balfour-112x165.jpg" width="112" height="165" alt="" /></div> <div class="thumbContent"> <h4>Nine</h4> </div> </div> </li> <li> <div class="thumbHolder"> <div class="thumbImage"><img src="http://camelotbooks.com/images/sized/uploads/bear_book_of_iron-112x165.jpg" width="112" height="165" alt="" /></div> <div class="thumbContent"> <h4>Ten</h4> </div> </div> </li> <li> <div class="thumbHolder"> <div class="thumbImage"><img src="http://camelotbooks.com/images/sized/uploads/bear_whitecity-112x165.jpg" width="112" height="165" alt="" /></div> <div class="thumbContent"> <h4>Eleven</h4> </div> </div> </li> <li> <div class="thumbHolder"> <div class="thumbImage"><img src="http://camelotbooks.com/images/sized/uploads/bear_boneandjewel-112x165.jpg" width="112" height="165" alt="" /></div> <div class="thumbContent"> <h4>Twelve</h4> </div> </div> </li> <li> <div class="thumbHolder"> <div class="thumbImage"><img src="http://camelotbooks.com/images/sized/uploads/antho_bookofdreams-112x165.jpg" width="112" height="165" alt="" /></div> <div class="thumbContent"> <h4>Thirteen</h4> </div> </div> </li> <li> <div class="thumbHolder"> <div class="thumbImage"><img src="http://www.ellenhopkins.com/sitebuilder/images/scan0003-112x165.jpg" width="112" height="165" alt="" /></div> <div class="thumbContent"> <h4>Fourteen</h4> </div> </div> </li> <li> <div class="thumbHolder"> <div class="thumbImage"><img src="https://www.artgallery.nsw.gov.au/media/thumbnails/collection_images/7/79.2001.14%23%23S.jpg.112x165_q85.jpg" width="112" height="165" alt="" /></div> <div class="thumbContent"> <h4>Fifteen</h4> </div> </div> </li> </ul> </div> <div class="clear"></div>
</div> <script src="js/index.js"></script>
</body>
</html>

Advanced JQuery Carousel - Script Codes CSS Codes

body, html {	/*height: 100%;*/	font-family:"Lucida Grande","Lucida Sans Unicode", Geneva, Arial, Verdana, sans-serif;	font-size:12px;	margin:0;	padding:0;	/*background:#F7F7F7;*/	background:#ffffff;
}
a:link {	color: #06F;	outline:0!important;	outline:none!important;
}
a:focus { outline: none!important;
}
.container {	margin:0 auto;	padding:0;	width:960px;	font-family:"Lucida Grande","Lucida Sans Unicode", Geneva, Arial, Verdana, sans-serif;	font-size:12px;
}
/** jCarousel **/
.jcarousel-container { position: relative;
}
.jcarousel-clip { /*z-index: 2;*/ padding: 0; margin: 0; overflow: hidden; position: relative;
}
.jcarousel-list { /*z-index: 1;*/ overflow: hidden; position: relative; top: 0; left: 0; margin: 0; padding: 0;
}
.jcarousel-list li,
.jcarousel-item { float: left; list-style: none; /* We set the width/height explicitly. No width/height causes infinite loops. */ /* width: 125px!important;*/ width:221px; height: 250px;
}
/** * The buttons are added dynamically by jCarousel before * the 
     list (inside the 
     described above) and * have the classnames "jcarousel-next" and "jcarousel-prev". */
.jcarousel-next { /*z-index: 3;*/ display: none;
}
.jcarousel-prev { /*z-index: 3;*/ display: none;
}
/* videos by this innovator */
.relatedHeadlineHolder {	width: 926px;	height: 15px;	margin: 10px 0 0 0;
}
#relatedByThis, #relatedInnovators {	visibility: hidden;	width: 1030px;	margin: 0;	position: relative;	margin-bottom: 0px;
}
#headlineRelatedByThis {	float: left;	color:#333333;	display: block;	width: 112px;	height: 40px;	margin: auto;
}
#byThisCarouselCounter, #innovatorCarouselCounter {	float: right;	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 10px;	color: #666666;	margin-right: 45px;	_margin-right: 5px;	margin-top: 5px;
}
#headlineRelatedWhyLove {	float: left;	color:#333333;	display: block;	width: 112px;	height: 40px;	margin: auto;
}
.thumbImage {	padding: 0px;	width: 112px;	height: 165px;	border:6px solid #ecebeb;
}
.thumbImage:hover {	border:6px solid #cccccc;
}
img {	border: 0;
}
.thumbHolder {	display: block;	overflow: hidden;	position: relative;	/*background: #ffffff url(images/thumb_bg2.gif) no-repeat;	background-position: 0 -325px;*/	background:none!Important;	width: 125px;	height: 230px;	text-decoration: none;	margin:0;
}
.thumbHolder:hover {	background: #ffffff url(images/thumb_bg2.gif) no-repeat;	background-position: 0 0px;	cursor:pointer;	text-decoration: none;
}
.thumbContent {	color: #333333;	padding: 3px 5px 0 5px;	text-align:center;
}
.thumbContent h4 {	margin-top:5px;	font-size:12px;	font-weight:normal;
}
.thumbContent a {	font-size:12px;
}
h4.videoName {	color: #a1a230;
}
.videoLength {	/*position: absolute;*/	position: relative;	left: 17px;	top: 7px;	/*bottom:17px*/	color: #111111;
}
.jcarousel-skin-thf_related .jcarousel-container {	background: none;	padding: 0;	margin: 0;	overflow: hidden;
}
.jcarousel-skin-thf_related .jcarousel-container-horizontal {	width: 926px;	margin:0 0 -35px 15px;/*padding: 20px 40px;*/
}
.jcarousel-skin-thf_related .jcarousel-container-vertical {
/* width: 75px; height: 245px; padding: 40px 20px;	*/
}
.jcarousel-skin-thf_related .jcarousel-clip-horizontal {	width: 855px;	/* height: 320px;*/	margin: 15px 0 0 42px;
}
.jcarousel-skin-thf_related .jcarousel-clip-vertical {
/* width: 75px; height: 245px;	*/
}
.jcarousel-skin-thf_related .jcarousel-item {
/*width: 226px; height: 320px;*/
}
.jcarousel-skin-thf_related .jcarousel-item-horizontal {	margin-right: 15px;
}
.jcarousel-skin-thf_related .jcarousel-item-vertical {	margin-bottom: 10px;
}
.jcarousel-skin-thf_related .jcarousel-item-placeholder {	background: #fff;	color: #000;
}
/** * Horizontal Buttons */
.jcarousel-skin-thf_related .jcarousel-next-horizontal {	position: absolute;	top: 80px;	right: 0px;	width: 20px;	height: 30px;	cursor: pointer;	background: transparent url(http://i49.photobucket.com/albums/f266/kwestalot/next-horiz.png) no-repeat 0 0;
}
.jcarousel-skin-thf_related .jcarousel-next-horizontal:hover {	background-position: -40px 0;
}
.jcarousel-skin-thf_related .jcarousel-next-horizontal:active {
/*background-position: -30px 0;*/
}
.jcarousel-skin-thf_related .jcarousel-next-disabled-horizontal, .jcarousel-skin-thf_related .jcarousel-next-disabled-horizontal:hover, .jcarousel-skin-thf_related .jcarousel-next-disabled-horizontal:active {	cursor: default;	background-position: -20px 0;
}
.jcarousel-skin-thf_related .jcarousel-prev-horizontal {	position: absolute;	top: 80px;	left: 0px;	width: 20px;	height: 30px;	cursor: pointer;	background: transparent url(http://i49.photobucket.com/albums/f266/kwestalot/prev-horiz.png) no-repeat 0 0;
}
.jcarousel-skin-thf_related .jcarousel-prev-horizontal:hover {	background-position: -40px 0;
}
.jcarousel-skin-thf_related .jcarousel-prev-horizontal:active {
/*background-position: -43px 0;*/
}
.jcarousel-skin-thf_related .jcarousel-prev-disabled-horizontal, .jcarousel-skin-thf_related .jcarousel-prev-disabled-horizontal:hover, .jcarousel-skin-thf_related .jcarousel-prev-disabled-horizontal:active {	cursor: default;	background-position: -20px 0;
}
/** * Vertical Buttons */
.jcarousel-skin-thf_related .jcarousel-next-vertical {	position: absolute;	bottom: 5px;	left: 43px;	width: 32px;	height: 32px;	cursor: pointer;	background: transparent url(images/scroller/next-vertical.png) no-repeat 0 0;
}
.jcarousel-skin-thf_related .jcarousel-next-vertical:hover {	background-position: 0 -32px;
}
.jcarousel-skin-thf_related .jcarousel-next-vertical:active {	background-position: 0 -64px;
}
.jcarousel-skin-thf_related .jcarousel-next-disabled-vertical, .jcarousel-skin-thf_related .jcarousel-next-disabled-vertical:hover, .jcarousel-skin-thf_related .jcarousel-next-disabled-vertical:active {	cursor: default;	background-position: 0 -96px;
}
.jcarousel-skin-thf_related .jcarousel-prev-vertical {	position: absolute;	top: 5px;	left: 43px;	width: 32px;	height: 32px;	cursor: pointer;	background: transparent url(images/scroller/prev-vertical.png) no-repeat 0 0;
}
.jcarousel-skin-thf_related .jcarousel-prev-vertical:hover {	background-position: 0 -32px;
}
.jcarousel-skin-thf_related .jcarousel-prev-vertical:active {	background-position: 0 -64px;
}
.jcarousel-skin-thf_related .jcarousel-prev-disabled-vertical, .jcarousel-skin-thf_related .jcarousel-prev-disabled-vertical:hover, .jcarousel-skin-thf_related .jcarousel-prev-disabled-vertical:active {	cursor: default;	background-position: 0 -96px;
}

Advanced JQuery Carousel - Script Codes JS Codes

// begin carousels	var byThisCarouselRef = null;	var byThisCarouselFirst = 1;	var byThisCarouselLast = 6;	var byThisCarouselTotal = null;	var innovatorCarouselRef = null;	var innovatorCarouselFirst = 1;	var innovatorCarouselLast = 4;	var innovatorCarouselTotal = null;	// Video Carousels	function byThisCarousel_initCallback(carousel, state){	// sets up global reference to carousel	byThisCarouselRef = carousel;	byThisCarouselTotal = carousel.options.size;	}	function byThisCarousel_itemFirstInCallback(carousel, item, idx, state) {	byThisCarouselFirst = idx;	}	function byThisCarousel_itemLastInCallback(carousel, item, idx, state) {	byThisCarouselLast = idx;	resetCounter('byThisCarouselCounter', byThisCarouselFirst, byThisCarouselLast, byThisCarouselTotal);	}	// Innovator Carousels	function innovatorCarousel_initCallback(carousel, state){	// sets up global reference to carousel	innovatorCarouselRef = carousel;	innovatorCarouselTotal = carousel.options.size;	}	function innovatorCarousel_itemFirstInCallback(carousel, item, idx, state) {	innovatorCarouselFirst = idx;	}	function innovatorCarousel_itemLastInCallback(carousel, item, idx, state) {	innovatorCarouselLast = idx;	resetCounter('innovatorCarouselCounter', innovatorCarouselFirst, innovatorCarouselLast, innovatorCarouselTotal);	}	// Collections Carousels	function collectionsCarousel_initCallback(carousel, state){	// sets up global reference to carousel	collectionsCarouselRef = carousel;	collectionsCarouselTotal = carousel.options.size;	}	function collectionsCarousel_itemFirstInCallback(carousel, item, idx, state) {	collectionsCarouselFirst = idx;	}	function collectionsCarousel_itemLastInCallback(carousel, item, idx, state) {	collectionsCarouselLast = idx;	resetCounter('collectionsCarouselCounter', collectionsCarouselFirst, collectionsCarouselLast, collectionsCarouselTotal);	}	function resetCounter(id, first, last, total) {	if(total > 3){	document.getElementById(id).innerHTML = 'Showing '+ first +'-'+ last +' of '+ total;	} else {	document.getElementById(id).style.visibility = 'hidden';	}	}	// end carousels	$(document).ready(function() {	// jCaoursel	jQuery('#byThisCarousel').jcarousel({	scroll: 6,	auto: 0,	/*wrap: 'last',*/	visible: 6,	initCallback: byThisCarousel_initCallback,	itemFirstInCallback: byThisCarousel_itemFirstInCallback,	itemLastInCallback: byThisCarousel_itemLastInCallback	});	// jCaoursel	jQuery('#innovatorsCarousel').jcarousel({	scroll: 6,	auto: 0,	/*wrap: 'last',*/	visible: 6,	initCallback: innovatorCarousel_initCallback,	itemFirstInCallback: innovatorCarousel_itemFirstInCallback,	itemLastInCallback: innovatorCarousel_itemLastInCallback	});	// shows all hidden divs once DOM is loaded	document.getElementById('relatedByThis').style.visibility = 'visible';	document.getElementById('relatedInnovators').style.visibility = 'visible';	document.getElementById('relatedCollections').style.visibility = 'visible';	});
//********************************* JQUERY CAROUSEL *************************************** //
/** * jCarousel - Riding carousels with jQuery * http://sorgalla.com/jcarousel/ * * Copyright (c) 2006 Jan Sorgalla (http://sorgalla.com) * Dual licensed under the MIT (MIT-LICENSE.txt) * and GPL (GPL-LICENSE.txt) licenses. * * Built on top of the jQuery library * https://jquery.com * * Inspired by the "Carousel Component" by Bill Scott * http://billwscott.com/carousel/ */
(function($) { /** * Creates a carousel for all matched elements. * * @example $("#mycarousel").jcarousel(); * @before <ul id="mycarousel" class="jcarousel-skin-name"><li>First item</li><li>Second item</li></ul> * @result * * <div class="jcarousel-skin-name"> * <div class="jcarousel-container"> * <div disabled="disabled" class="jcarousel-prev jcarousel-prev-disabled"></div> * <div class="jcarousel-next"></div> * <div class="jcarousel-clip"> * <ul class="jcarousel-list"> * <li class="jcarousel-item-1">First item</li> * <li class="jcarousel-item-2">Second item</li> * </ul> * </div> * </div> * </div> * * @name jcarousel * @type jQuery * @param Hash o A set of key/value pairs to set as configuration properties. * @cat Plugins/jCarousel */ $.fn.jcarousel = function(o) { return this.each(function() { new $jc(this, o); }); }; // Default configuration properties. var defaults = { vertical: false, start: 1, offset: 1, size: null, scroll: 3, visible: null, animation: 'normal', easing: 'swing', auto: 0, wrap: null, initCallback: null, reloadCallback: null, itemLoadCallback: null, itemFirstInCallback: null, itemFirstOutCallback: null, itemLastInCallback: null, itemLastOutCallback: null, itemVisibleInCallback: null, itemVisibleOutCallback: null, buttonNextHTML: '<div></div>', buttonPrevHTML: '<div></div>', buttonNextEvent: 'click', buttonPrevEvent: 'click', buttonNextCallback: null, buttonPrevCallback: null }; /** * The jCarousel object. * * @constructor * @name $.jcarousel * @param Object e The element to create the carousel for. * @param Hash o A set of key/value pairs to set as configuration properties. * @cat Plugins/jCarousel */ $.jcarousel = function(e, o) { this.options = $.extend({}, defaults, o || {}); this.locked = false; this.container = null; this.clip = null; this.list = null; this.buttonNext = null; this.buttonPrev = null; this.wh = !this.options.vertical ? 'width' : 'height'; this.lt = !this.options.vertical ? 'left' : 'top'; // Extract skin class var skin = '', split = e.className.split(' '); for (var i = 0; i < split.length; i++) { if (split[i].indexOf('jcarousel-skin') != -1) { $(e).removeClass(split[i]); var skin = split[i]; break; } } if (e.nodeName == 'UL' || e.nodeName == 'OL') { this.list = $(e); this.container = this.list.parent(); if (this.container.hasClass('jcarousel-clip')) { if (!this.container.parent().hasClass('jcarousel-container')) this.container = this.container.wrap('<div></div>'); this.container = this.container.parent(); } else if (!this.container.hasClass('jcarousel-container')) this.container = this.list.wrap('<div></div>').parent(); } else { this.container = $(e); this.list = $(e).find('>ul,>ol,div>ul,div>ol'); } if (skin != '' && this.container.parent()[0].className.indexOf('jcarousel-skin') == -1)	this.container.wrap('<div class=" '+ skin + '"></div>'); this.clip = this.list.parent(); if (!this.clip.length || !this.clip.hasClass('jcarousel-clip')) this.clip = this.list.wrap('<div></div>').parent(); this.buttonPrev = $('.jcarousel-prev', this.container); if (this.buttonPrev.size() == 0 && this.options.buttonPrevHTML != null) this.buttonPrev = this.clip.before(this.options.buttonPrevHTML).prev(); this.buttonPrev.addClass(this.className('jcarousel-prev')); this.buttonNext = $('.jcarousel-next', this.container); if (this.buttonNext.size() == 0 && this.options.buttonNextHTML != null) this.buttonNext = this.clip.before(this.options.buttonNextHTML).prev(); this.buttonNext.addClass(this.className('jcarousel-next')); this.clip.addClass(this.className('jcarousel-clip')); this.list.addClass(this.className('jcarousel-list')); this.container.addClass(this.className('jcarousel-container')); var di = this.options.visible != null ? Math.ceil(this.clipping() / this.options.visible) : null; var li = this.list.children('li'); var self = this; if (li.size() > 0) { var wh = 0, i = this.options.offset; li.each(function() { self.format(this, i++); wh += self.dimension(this, di); }); this.list.css(this.wh, wh + 'px'); // Only set if not explicitly passed as option if (!o || o.size === undefined) this.options.size = li.size(); } // For whatever reason, .show() does not work in Safari... this.container.css('display', 'block'); this.buttonNext.css('display', 'block'); this.buttonPrev.css('display', 'block'); this.funcNext = function() { self.next(); }; this.funcPrev = function() { self.prev(); }; this.funcResize = function() { self.reload(); }; if (this.options.initCallback != null) this.options.initCallback(this, 'init'); if ($.browser.safari) { this.buttons(false, false); $(window).bind('load', function() { self.setup(); }); } else this.setup(); }; // Create shortcut for internal use var $jc = $.jcarousel; $jc.fn = $jc.prototype = { jcarousel: '0.2.3' }; $jc.fn.extend = $jc.extend = $.extend; $jc.fn.extend({ /** * Setups the carousel. * * @name setup * @type undefined * @cat Plugins/jCarousel */ setup: function() { this.first = null; this.last = null; this.prevFirst = null; this.prevLast = null; this.animating = false; this.timer = null; this.tail = null; this.inTail = false; if (this.locked) return; this.list.css(this.lt, this.pos(this.options.offset) + 'px'); var p = this.pos(this.options.start); this.prevFirst = this.prevLast = null; this.animate(p, false); $(window).unbind('resize', this.funcResize).bind('resize', this.funcResize); }, /** * Clears the list and resets the carousel. * * @name reset * @type undefined * @cat Plugins/jCarousel */ reset: function() { this.list.empty(); this.list.css(this.lt, '0px'); this.list.css(this.wh, '10px'); if (this.options.initCallback != null) this.options.initCallback(this, 'reset'); this.setup(); }, /** * Reloads the carousel and adjusts positions. * * @name reload * @type undefined * @cat Plugins/jCarousel */ reload: function() { if (this.tail != null && this.inTail) this.list.css(this.lt, $jc.intval(this.list.css(this.lt)) + this.tail); this.tail = null; this.inTail = false; if (this.options.reloadCallback != null) this.options.reloadCallback(this); if (this.options.visible != null) { var self = this; var di = Math.ceil(this.clipping() / this.options.visible), wh = 0, lt = 0; $('li', this.list).each(function(i) { wh += self.dimension(this, di); if (i + 1 < self.first) lt = wh; }); this.list.css(this.wh, wh + 'px'); this.list.css(this.lt, -lt + 'px'); } this.scroll(this.first, false); }, /** * Locks the carousel. * * @name lock * @type undefined * @cat Plugins/jCarousel */ lock: function() { this.locked = true; this.buttons(); }, /** * Unlocks the carousel. * * @name unlock * @type undefined * @cat Plugins/jCarousel */ unlock: function() { this.locked = false; this.buttons(); }, /** * Sets the size of the carousel. * * @name size * @type undefined * @param Number s The size of the carousel. * @cat Plugins/jCarousel */ size: function(s) { if (s != undefined) { this.options.size = s; if (!this.locked) this.buttons(); } return this.options.size; }, /** * Checks whether a list element exists for the given index (or index range). * * @name get * @type bool * @param Number i The index of the (first) element. * @param Number i2 The index of the last element. * @cat Plugins/jCarousel */ has: function(i, i2) { if (i2 == undefined || !i2) i2 = i; if (this.options.size !== null && i2 > this.options.size)	i2 = this.options.size; for (var j = i; j <= i2; j++) { var e = this.get(j); if (!e.length || e.hasClass('jcarousel-item-placeholder')) return false; } return true; }, /** * Returns a jQuery object with list element for the given index. * * @name get * @type jQuery * @param Number i The index of the element. * @cat Plugins/jCarousel */ get: function(i) { return $('.jcarousel-item-' + i, this.list); }, /** * Adds an element for the given index to the list. * If the element already exists, it updates the inner html. * Returns the created element as jQuery object. * * @name add * @type jQuery * @param Number i The index of the element. * @param String s The innerHTML of the element. * @cat Plugins/jCarousel */ add: function(i, s) { var e = this.get(i), old = 0, add = 0; if (e.length == 0) { var c, e = this.create(i), j = $jc.intval(i); while (c = this.get(--j)) { if (j <= 0 || c.length) { j <= 0 ? this.list.prepend(e) : c.after(e); break; } } } else old = this.dimension(e); e.removeClass(this.className('jcarousel-item-placeholder')); typeof s == 'string' ? e.html(s) : e.empty().append(s); var di = this.options.visible != null ? Math.ceil(this.clipping() / this.options.visible) : null; var wh = this.dimension(e, di) - old; if (i > 0 && i < this.first) this.list.css(this.lt, $jc.intval(this.list.css(this.lt)) - wh + 'px'); this.list.css(this.wh, $jc.intval(this.list.css(this.wh)) + wh + 'px'); return e; }, /** * Removes an element for the given index from the list. * * @name remove * @type undefined * @param Number i The index of the element. * @cat Plugins/jCarousel */ remove: function(i) { var e = this.get(i); // Check if item exists and is not currently visible if (!e.length || (i >= this.first && i <= this.last)) return; var d = this.dimension(e); if (i < this.first) this.list.css(this.lt, $jc.intval(this.list.css(this.lt)) + d + 'px'); e.remove(); this.list.css(this.wh, $jc.intval(this.list.css(this.wh)) - d + 'px'); }, /** * Moves the carousel forwards. * * @name next * @type undefined * @cat Plugins/jCarousel */ next: function() { this.stopAuto(); if (this.tail != null && !this.inTail) this.scrollTail(false); else this.scroll(((this.options.wrap == 'both' || this.options.wrap == 'last') && this.options.size != null && this.last == this.options.size) ? 1 : this.first + this.options.scroll); }, /** * Moves the carousel backwards. * * @name prev * @type undefined * @cat Plugins/jCarousel */ prev: function() { this.stopAuto(); if (this.tail != null && this.inTail) this.scrollTail(true); else this.scroll(((this.options.wrap == 'both' || this.options.wrap == 'first') && this.options.size != null && this.first == 1) ? this.options.size : this.first - this.options.scroll); }, /** * Scrolls the tail of the carousel. * * @name scrollTail * @type undefined * @param Bool b Whether scroll the tail back or forward. * @cat Plugins/jCarousel */ scrollTail: function(b) { if (this.locked || this.animating || !this.tail) return; var pos = $jc.intval(this.list.css(this.lt)); !b ? pos -= this.tail : pos += this.tail; this.inTail = !b; // Save for callbacks this.prevFirst = this.first; this.prevLast = this.last; this.animate(pos); }, /** * Scrolls the carousel to a certain position. * * @name scroll * @type undefined * @param Number i The index of the element to scoll to. * @param Bool a Flag indicating whether to perform animation. * @cat Plugins/jCarousel */ scroll: function(i, a) { if (this.locked || this.animating) return; this.animate(this.pos(i), a); }, /** * Prepares the carousel and return the position for a certian index. * * @name pos * @type Number * @param Number i The index of the element to scoll to. * @cat Plugins/jCarousel */ pos: function(i) { if (this.locked || this.animating) return; if (this.options.wrap != 'circular') i = i < 1 ? 1 : (this.options.size && i > this.options.size ? this.options.size : i); var back = this.first > i; var pos = $jc.intval(this.list.css(this.lt)); // Create placeholders, new list width/height // and new list position var f = this.options.wrap != 'circular' && this.first <= 1 ? 1 : this.first; var c = back ? this.get(f) : this.get(this.last); var j = back ? f : f - 1; var e = null, l = 0, p = false, d = 0; while (back ? --j >= i : ++j < i) { e = this.get(j); p = !e.length; if (e.length == 0) { e = this.create(j).addClass(this.className('jcarousel-item-placeholder')); c[back ? 'before' : 'after' ](e); } c = e; d = this.dimension(e); if (p) l += d; if (this.first != null && (this.options.wrap == 'circular' || (j >= 1 && (this.options.size == null || j <= this.options.size)))) pos = back ? pos + d : pos - d; } // Calculate visible items var clipping = this.clipping(); var cache = []; var visible = 0, j = i, v = 0; var c = this.get(i - 1); while (++visible) { e = this.get(j); p = !e.length; if (e.length == 0) { e = this.create(j).addClass(this.className('jcarousel-item-placeholder')); // This should only happen on a next scroll c.length == 0 ? this.list.prepend(e) : c[back ? 'before' : 'after' ](e); } c = e; var d = this.dimension(e); if (d == 0) { alert('jCarousel: No width/height set for items. This will cause an infinite loop. Aborting...'); return 0; } if (this.options.wrap != 'circular' && this.options.size !== null && j > this.options.size) cache.push(e); else if (p) l += d; v += d; if (v >= clipping) break; j++; } // Remove out-of-range placeholders for (var x = 0; x < cache.length; x++) cache[x].remove(); // Resize list if (l > 0) { this.list.css(this.wh, this.dimension(this.list) + l + 'px'); if (back) { pos -= l; this.list.css(this.lt, $jc.intval(this.list.css(this.lt)) - l + 'px'); } } // Calculate first and last item var last = i + visible - 1; if (this.options.wrap != 'circular' && this.options.size && last > this.options.size) last = this.options.size; if (j > last) { visible = 0, j = last, v = 0; while (++visible) { var e = this.get(j--); if (!e.length) break; v += this.dimension(e); if (v >= clipping) break; } } var first = last - visible + 1; if (this.options.wrap != 'circular' && first < 1) first = 1; if (this.inTail && back) { pos += this.tail; this.inTail = false; } this.tail = null; if (this.options.wrap != 'circular' && last == this.options.size && (last - visible + 1) >= 1) { var m = $jc.margin(this.get(last), !this.options.vertical ? 'marginRight' : 'marginBottom'); if ((v - m) > clipping) this.tail = v - clipping - m; } // Adjust position while (i-- > first) pos += this.dimension(this.get(i)); // Save visible item range this.prevFirst = this.first; this.prevLast = this.last; this.first = first; this.last = last; return pos; }, /** * Animates the carousel to a certain position. * * @name animate * @type undefined * @param mixed p Position to scroll to. * @param Bool a Flag indicating whether to perform animation. * @cat Plugins/jCarousel */ animate: function(p, a) { if (this.locked || this.animating) return; this.animating = true; var self = this; var scrolled = function() { self.animating = false; if (p == 0) self.list.css(self.lt, 0); if (self.options.wrap == 'both' || self.options.wrap == 'last' || self.options.size == null || self.last < self.options.size) self.startAuto(); self.buttons(); self.notify('onAfterAnimation'); }; this.notify('onBeforeAnimation'); // Animate if (!this.options.animation || a == false) { this.list.css(this.lt, p + 'px'); scrolled(); } else { var o = !this.options.vertical ? {'left': p} : {'top': p}; this.list.animate(o, this.options.animation, this.options.easing, scrolled); } }, /** * Starts autoscrolling. * * @name auto * @type undefined * @param Number s Seconds to periodically autoscroll the content. * @cat Plugins/jCarousel */ startAuto: function(s) { if (s != undefined) this.options.auto = s; if (this.options.auto == 0) return this.stopAuto(); if (this.timer != null) return; var self = this; this.timer = setTimeout(function() { self.next(); }, this.options.auto * 1000); }, /** * Stops autoscrolling. * * @name stopAuto * @type undefined * @cat Plugins/jCarousel */ stopAuto: function() { if (this.timer == null) return; clearTimeout(this.timer); this.timer = null; }, /** * Sets the states of the prev/next buttons. * * @name buttons * @type undefined * @cat Plugins/jCarousel */ buttons: function(n, p) { if (n == undefined || n == null) { var n = !this.locked && this.options.size !== 0 && ((this.options.wrap && this.options.wrap != 'first') || this.options.size == null || this.last < this.options.size); if (!this.locked && (!this.options.wrap || this.options.wrap == 'first') && this.options.size != null && this.last >= this.options.size) n = this.tail != null && !this.inTail; } if (p == undefined || p == null) { var p = !this.locked && this.options.size !== 0 && ((this.options.wrap && this.options.wrap != 'last') || this.first > 1); if (!this.locked && (!this.options.wrap || this.options.wrap == 'last') && this.options.size != null && this.first == 1) p = this.tail != null && this.inTail; } var self = this; this.buttonNext[n ? 'bind' : 'unbind'](this.options.buttonNextEvent, this.funcNext)[n ? 'removeClass' : 'addClass'](this.className('jcarousel-next-disabled')).attr('disabled', n ? false : true); this.buttonPrev[p ? 'bind' : 'unbind'](this.options.buttonPrevEvent, this.funcPrev)[p ? 'removeClass' : 'addClass'](this.className('jcarousel-prev-disabled')).attr('disabled', p ? false : true); if (this.buttonNext.length > 0 && (this.buttonNext[0].jcarouselstate == undefined || this.buttonNext[0].jcarouselstate != n) && this.options.buttonNextCallback != null) { this.buttonNext.each(function() { self.options.buttonNextCallback(self, this, n); }); this.buttonNext[0].jcarouselstate = n; } if (this.buttonPrev.length > 0 && (this.buttonPrev[0].jcarouselstate == undefined || this.buttonPrev[0].jcarouselstate != p) && this.options.buttonPrevCallback != null) { this.buttonPrev.each(function() { self.options.buttonPrevCallback(self, this, p); }); this.buttonPrev[0].jcarouselstate = p; } }, notify: function(evt) { var state = this.prevFirst == null ? 'init' : (this.prevFirst < this.first ? 'next' : 'prev'); // Load items this.callback('itemLoadCallback', evt, state); if (this.prevFirst !== this.first) { this.callback('itemFirstInCallback', evt, state, this.first); this.callback('itemFirstOutCallback', evt, state, this.prevFirst); } if (this.prevLast !== this.last) { this.callback('itemLastInCallback', evt, state, this.last); this.callback('itemLastOutCallback', evt, state, this.prevLast); } this.callback('itemVisibleInCallback', evt, state, this.first, this.last, this.prevFirst, this.prevLast); this.callback('itemVisibleOutCallback', evt, state, this.prevFirst, this.prevLast, this.first, this.last); }, callback: function(cb, evt, state, i1, i2, i3, i4) { if (this.options[cb] == undefined || (typeof this.options[cb] != 'object' && evt != 'onAfterAnimation')) return; var callback = typeof this.options[cb] == 'object' ? this.options[cb][evt] : this.options[cb]; if (!$.isFunction(callback)) return; var self = this; if (i1 === undefined) callback(self, state, evt); else if (i2 === undefined) this.get(i1).each(function() { callback(self, this, i1, state, evt); }); else { for (var i = i1; i <= i2; i++) if (i !== null && !(i >= i3 && i <= i4)) this.get(i).each(function() { callback(self, this, i, state, evt); }); } }, create: function(i) { return this.format('<li></li>', i); }, format: function(e, i) { var $e = $(e).addClass(this.className('jcarousel-item')).addClass(this.className('jcarousel-item-' + i)); $e.attr('jcarouselindex', i); return $e; }, className: function(c) { return c + ' ' + c + (!this.options.vertical ? '-horizontal' : '-vertical'); }, dimension: function(e, d) { var el = e.jquery != undefined ? e[0] : e; var old = !this.options.vertical ? el.offsetWidth + $jc.margin(el, 'marginLeft') + $jc.margin(el, 'marginRight') : el.offsetHeight + $jc.margin(el, 'marginTop') + $jc.margin(el, 'marginBottom'); if (d == undefined || old == d) return old; var w = !this.options.vertical ? d - $jc.margin(el, 'marginLeft') - $jc.margin(el, 'marginRight') : d - $jc.margin(el, 'marginTop') - $jc.margin(el, 'marginBottom'); $(el).css(this.wh, w + 'px'); return this.dimension(el); }, clipping: function() { return !this.options.vertical ? this.clip[0].offsetWidth - $jc.intval(this.clip.css('borderLeftWidth')) - $jc.intval(this.clip.css('borderRightWidth')) : this.clip[0].offsetHeight - $jc.intval(this.clip.css('borderTopWidth')) - $jc.intval(this.clip.css('borderBottomWidth')); }, index: function(i, s) { if (s == undefined) s = this.options.size; return Math.round((((i-1) / s) - Math.floor((i-1) / s)) * s) + 1; } }); $jc.extend({ /** * Gets/Sets the global default configuration properties. * * @name defaults * @descr Gets/Sets the global default configuration properties. * @type Hash * @param Hash d A set of key/value pairs to set as configuration properties. * @cat Plugins/jCarousel */ defaults: function(d) { return $.extend(defaults, d || {}); }, margin: function(e, p) { if (!e) return 0; var el = e.jquery != undefined ? e[0] : e; if (p == 'marginRight' && $.browser.safari) { var old = {'display': 'block', 'float': 'none', 'width': 'auto'}, oWidth, oWidth2; $.swap(el, old, function() { oWidth = el.offsetWidth; }); old['marginRight'] = 0; $.swap(el, old, function() { oWidth2 = el.offsetWidth; }); return oWidth2 - oWidth; } return $jc.intval($.css(el, p)); }, intval: function(v) { v = parseInt(v); return isNaN(v) ? 0 : v; } });
})(jQuery);
Advanced JQuery Carousel - Script Codes
Advanced JQuery Carousel - Script Codes
Home Page Home
Developer Boyd Massie
Username massiebn
Uploaded November 28, 2022
Rating 3
Size 10,599 Kb
Views 14,168
Do you need developer help for Advanced JQuery Carousel?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Boyd Massie (massiebn) Script Codes
Name
JQuery Quiz
Desaturate an image with CSS
QuickFlip
Snow Falling JS
Fancy Image Showcase With Timer Bar
Page Peel
Responsive Tournament Bracket
Countdown Timer
Background Video
Round-A-Bout Image Showcase
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!