Carousels

1. Calculate your Items

The number of visible items will always be based on the following formula:

total visible items = slider width / (slider’s gridwidth + carousel item spacing)

As an example, let’s say your slider is placed inside your web page’s content container, which has a normal width of 960px.  to display 3 carousel items at the same time inside the slider, with 20px spacing between them, set your gridwidth to 300.

Or, if your slider is meant to be fullwidth, the number of visible items would then vary depending on the user’s screen size, based on the calculation above.

2. Declare your Carousel Settings

  • sliderTypeUse "carousel" to activate carousel mode for the slider.
  • maxVisibleItemsThe maximum number of items that should be visible at any given time.
  • spaceThe spacing between the items.
  • infinityThe carousel won't have an end or a beginning, and instead will just repeat infinitely. Options are "on" and "off".
  • stretchon off
    Stretches the items to display across the entire width of the slider. Using this option, only one slide would ever be visible at a time.
  • border_radiusApply rounded corners to the individual slides.
  • horizontal_alignleft center right
    The starting point of the 1st slide.
  • fadeouton off
    Use in combination with the "vary_fade" option below to allow for transparency of non-active items.
  • vary_fadeon off
    Add transparency to non-active items, where the items closest to the center will be slightly transparent, and the items furthest away will more transparent.
  • maxRotationRotates the non-active items creating a traditional 3D carousel effect. Accepts a number between 0-360
  • vary_rotationon off
    Rotate the non-active items based on how close they are to the center item. Items closest to the center will be rotated less, and items furthest away will be rotated more.
  • minScaleScale the non-active items down by a certain percentage. Accepts a number between 0-100.
  • vary_scaleon off
    Scale the non-active items based on how close they are to the center item. Items closest to the center will be scaled down less, and items furthest away will be scaled down the most.