JavaScript OOP: Carousel From Scratch

Below are 3 Carousel objects created from the same Carousel class. Source code can be seen on Github.

Default Carousel

Default Carousel

Features:

Viewing size is 400x300 pixels
Functional buttons appear on hover (pause, left/right navigation)
Default transition time for auto-slide is 1800ms
Auto-slide direction follows the last navigation arrow pressed (i.e., if you pressed the left arrow, the carousel will auto-slide towards the left.

Code Usage:


  var carouselA = new CAROUSEL.Carousel({ 
    divId: 'carouselA', 
    jsonPath: './js/json/jsonImages.json'
  });

Portrait Carousel

Portrait Carousel

Features:

Uses all Default properties overridden (e.g., size)
Viewing size is 300x500
Supports all sizes
Preserves natural resolution of images
Transition Time is 3000ms
Background color is of green hue

Code Usage:


  var inputPortrait = { divId: 'carouselPortrait', 
    jsonPath: './js/json/jsonImagesLettered.json', 
    width: 300, height: 500, 
    tranTime: 3000,
    backgroundColor: 'rgba(40, 200, 100, 0.55)'};
  var carouselPortrait = new CAROUSEL.Carousel(inputPortrait);

Flickr Carousel

Flickr Carousel

Features:

Uses all Default properties overridden (e.g., size)
Flickr API was used with the keyword 'dog' to fetch the images, and the data was in JSONP instead of JSON.
Pink background color

Code Usage:


  var input = { divId: 'carouselWithFlickr', 
    flickrTag: 'dog', 
    backgroundColor: 'pink', 
    width: 500, height: 400,
    download: 'false'};
  var carouselWithFlickr = new CAROUSEL.Carousel(input);