Carousel FX definitions

carousel_fx.js

A.Carousel.fx = {
	'fade': {
		in: {
			opacity: '1',
			on: {
				start: function() {
					this.setStyles({
						opacity: '0'
					});
				},
				end: function() {
					this.setStyles({
						opacity: ''
					});
				}
			}
		},
		out: {
			opacity: '0',
			on: {
				start: function() {
					this.setStyles({
						opacity: '1'
					});
				},
				end: function() {
					this.setStyles({
						opacity: ''
					});
				}
			}
		}
	},
	'slide': function(direction){
		var config = {
			in: {
				left: 0,
				on: {
					end: function() {
						this.setStyles({
							left: '',
							opacity: ''
						});
					},
					start: function() {
						this.setStyles({
							left: (direction == 'prev') ? '100%' : '-100%',
							opacity: '1'
						});
					}
				}
			},
			out: {
				left: (direction == 'prev') ? '-100%' : '100%',
				on: {
					start: function() {
						this.setStyles({
							left: '0',
							opacity: '1'
						});
					},
					end: function() {
						this.setStyles({
							left: '',
							opacity: ''
						});
					}
				}
			}
		};

		return config;
	}
};

carousel_impl.js

//Possible ways to use this:

AUI().use('aui-carousel', function(A) {
	// Add your own effects
	// useful if you were to define them in a separate module so you could reuse them in multiple places
	
	A.mix(A.Carousel.fx, {
		'pushPullSqueeze': {
			in: {/* ... */ },
			out: {/* ... */ }
		},
		'jumpFadeRotate': {
			in: {/* ... */ },
			out: {/* ... */ }
		}
	});
	
	new A.Carousel({
		// ...
		fx: 'jumpFadeRotate'
		//...
	});
	
	// Or just define them on a per-instance basis

	new A.Carousel({
		fx: {
			in: {/* ... */ },
			out: {/* ... */ }
		}
	});
})