Handles: remove 'Slide'; syncing: move to enable(); add optional argument to _updateHeight

Author: backflip

bower.json

@@ -1,6 +1,6 @@
 {
 	"name": "jquery-carousel",
-	"version": "2.0.0",
+	"version": "2.0.1",
 	"main": ["./jquery.carousel.js"],
 	"author": "Thomas Jaggi",
 	"dependencies": {

jquery.carousel.js

@@ -23,7 +23,7 @@
 				navItemNext: '<button class="' + namespace + '-nav" role="presentation">Show next slide</button>',
 				counter: '<div class="' + namespace + '-counter" aria-hidden="true" role="presentation">%current% of %total%</div>',
 				handleContainer: '<div class="' + namespace + '-handles" aria-hidden="true" role="presentation" />',
-				handleItem: '<button class="' + namespace + '-handle" role="presentation">Slide %index%</div>'
+				handleItem: '<button class="' + namespace + '-handle" role="presentation">%index%</div>'
 			},
 			stateClasses: {
 				isInitialized: 'is-initialized',
@@ -263,13 +263,6 @@
 				}, this));
 			}
 
-			// Sync with other carousels
-			if (this.settings.$syncedCarousels) {
-				this.$dom.container.on(utils.getNamespacedEvents(syncEvent), $.proxy(function(event, params) {
-					this.goTo(params.index, false, true);
-				}, this));
-			}
-
 			// Save instance to data attribute
 			$dom.container.data(namespace, this);
 
@@ -416,7 +409,9 @@
 					setTimeout(function() {
 						self.$dom.frame.scrollLeft(scrollLeft);
 
-						self.goTo(index);
+						if (index > self.props.currentSlideIndex && index < (self.props.currentSlideIndex + self.props.visibleSlides)) {
+							self.goTo(index);
+						}
 					}, 0);
 				});
 			});
@@ -445,6 +440,13 @@
 			if (!this.settings.layout.fixedHeight) {
 				this._updateHeight();
 			}
+
+			// Sync with other carousels
+			if (this.settings.$syncedCarousels) {
+				this.$dom.container.on(utils.getNamespacedEvents(syncEvent), $.proxy(function(event, params) {
+					this.goTo(params.index, false, true);
+				}, this));
+			}
 		},
 
 		disable: function() {
@@ -986,13 +988,18 @@
 
 		// Update slider based on currently visible slides
 		// TODO: called twice on init
-		_updateHeight: function() {
+		_updateHeight: function(targetHeight) {
 			var minIndex = this.props.currentDomIndex,
 				maxIndex = minIndex + this.props.visible,
 				filterSelector = (minIndex > 0) ? ':gt(' + (minIndex - 1) + '):lt(' + this.props.visible + ')' : ':lt(' + (maxIndex) + ')',
 				maxHeight = this._getHighestSlide(),
 				height = this._getHighestSlide(filterSelector);
 
+			if (targetHeight) {
+				height = targetHeight;
+				maxHeight = '100em';
+			}
+
 			this.$dom.slides.css('min-height', maxHeight);
 
 			this.$dom.frame.animate({

jquery.carousel.scss

@@ -23,6 +23,7 @@ $carouselColorDisabled: #999 !default;
 	.is-initialized & {
 		list-style: none;
 		margin: 0;
+		overflow: hidden;
 		padding: 0;
 		position: relative;
 		/* Use GPU */