Carousel

Contents

Any slider can be displayed as a super-flexible carousel.  To see an example, just choose “Carousel” for your slider’s Slider Type.

Once the “Slider Type” is set to “Carousel”, the “Carousel Settings” will appear beneath the “Navigation” section.

Infinity Scroll

OFF: Carousel will have a “beginning” and an “end”.  Meaning when the end is reached, the slider will not automatically loop, and the only way to view previous slides would be to navigate backwards.

ON: The carousel will loop infinitely.  Meaning when the last slide is reached, the next slide shown be be a copy of the very first slide, and so on, allowing you to click forward endlessly.

Space Between Slides

In a carousel format, normally items are shown as “blocks” that have spaces between them.  This spacing is optional, but if you want to display a traditional carousel look, add some spacing here.

Border Radius

Add rounded corners to your carousel items by applying a pixel value here.  Or to achieve perfect circles, add a “50%” border-radius.

Padding Top / Padding Bottom

Add some padding to the top and bottom of the carousel items, creating some extra space for the items in relation to the rest of the page’s content.

Max Visible Items

Represents the number of items that will be visible.  For example, using the number “3”, the selected slide will be centered in the carousel, and then there will be 1 carousel item to the right (representing the “next” slide), and 1 carousel item to the left (representing the “previous” slide).

Stretch Element

The selected carousel item will be stretched to cover the entire size of the slider.

When this option is used, “previous” and “next” carousel items will not be visible, regardless of the “Max Visible Items” value.

  • Special Note:
    A brief explanation of Varying Fade, Varying Rotation and Varying Scale

When a “varying” option is enabled, it means that the calculation will be based on the position of the item in relation to the currently selected item.

For example, let’s say you have a carousel with 5 visible items, and a “Varying Scale” of “50%”.  When you cycle through the carousel items, the 5th item on the right will be scaled to 50%.  Then when the 5th item becomes the 4th visible item, it will be scaled to 75%.  And then when it finally reaches the center of the carousel, it will be scaled to 100%.

But when no varying option is used, with the same carousel (5 visible items), the 5th item will have a 50% scale.  And then when it becomes the 4th visible item, it will still have a 50% scale.  And then when it finally reaches the center of the carousel, only then will it scale from 50% to 100%.

Fade All Elements

All previous and next carousel items will be semi-transparent.

Varying Fade – See Special Note above.

OFF: Fading will only occur for immediate neighboring items.

ON: Fading will occur throughout the visible cycle of the item.

Rotation

Apply a “skew” to items when the carousel progresses forward and back (this gives the effect of a window opening from the side).  Degree values ranging from 45 to 180 usually work best.

Varying Rotation – See Special Note above.

OFF: Rotation will only occur for immediate neighboring items.

ON: Rotation will occur throughout the visible cycle of the item.

Scale

Scale previous and next slides down based on a percentage.

Max Scaledown

The percentage to scale previous and next items down.  For example, 50% would means that previous and next slides would be resized to half the size of the selected carousel item.

Varying Scale – See Special Note above

OFF: Scaling will only occur for immediate neighboring items.

ON: Scaling will occur throughout the visible cycle of the item.

Choose a vertical and horizontal alignment for the carousel’s main item.  For example, if the alignment is set to “right center”, when the the main selected item comes into focus, it will be aligned to the very right of the slider’s layout.