Parallax Scroller (Carousel)


The Carousel component briefly displays images, one at a time, in a specified order. The component has a foreground caption image layered on top of a background graphic image, based on the Parallax method which entails two layers animating vertically, either seamlessly moving up (if progressing forward in the carousel) or down (if moving back in the carousel). The background graphic image moves at a defined rate while the foreground caption image moves at a slower rate.

The carousel continuously and automatically scrolls through a number of images. The carousel also includes clickable controls (vertical dots) that allow the end-user to manually scroll by clicking on the dots, also providing the end-user with a visual cue of where they are in the data set. Each image within the carousel is represented by a circle, and empty circles act as navigation between the images. When a user hovers over the images or clickable controls, the auto scroll will pause. Removing the cursor from hovering over these elements resumes the automatic transition behavior.

Parameters Input By Author

  • Photo Gallery tab
    • Slide drop-down with associated [Add] and [Remove] buttons
      • [Add] button adds a new slide
      • [Remove] button deletes the currently selected slide
    • Alt Text
      • Alternative text for image
    • Title
      • Title of image
    • Caption
      • Display text superimposed on image
    • Credit
      • Image credits
  • Advanced tab
    • Speed in ms
      • The speed (in milliseconds) of moving text
    • Transitions in ms
      • The speed (in milliseconds) between transitions
    • Delay in ms
      • Delay (in milliseconds) start of transitions
    • Text color
      • Foreground (text) color
    • Color behind text
      • Background color
    • Randomize
      • Random order of images


  1. Drag component from Sidekick into page.
  2. In the Photo Gallery tab, drag an image from the DAM into the component. This will preload the Title textbox in the form. Enter Alt Text, Caption and Credit.
  3. To add another slide, click on [Add]. The form will be reset for entering the new slide’s metadata. Repeat step 2.
  4. Once slides are added, click on the Advanced tab. The form in this tab facilitates controlling the speed of the caption, transition, foreground and background colors, and an option to randomize the order of display of slides.
  5. Click on OK.

Additionally, the parallax scroller could be used as a simple slide show.

Screen Shots

Configuration dialog tabs