Cycler Settings


Cycler - Layout

  • Height: (select) Height of the Cycler container. Auto should work a majoirty of the time.
    • Default: Auto
    • Possible Values:
      • Auto
      • FIxed Height
  • Fixed Height: (number) The height of the slider in pixels
    • Enable: When Height is set to fixed
    • Default: 500px
    • Min Value: 50px
    • Max Value: 1000px

  • Add Drop Shadow?: (checkbox) Add a drop shadow to the slider
    • Default: false
  • X-Offset: (slider) The horizontal offset for the shadow
    • Enable: When Add Drop Shadow? is set to true
    • Default: 1px
    • Min Value: 0px
    • Max Value: 5px
  • Y-Offset: (slider) The vertical offset for the shadow
    • Enable: When Add Drop Shadow? is set to true
    • Default: 1px
    • Min Value: 0px
    • Max Value: 5px
  • Blur: (slider) The blur radius for the shadow
    • Enable: When Add Drop Shadow? is set to true
    • Default: 5px
    • Min Value: 0px
    • Max Value: 30px
  • Color: (color) The color of shadow
    • Enable: When Add Drop Shadow? is set to true
    • Allows Opacity: false

  • Collapse in Edit Mode?: (checkbox) Collapse the interface so that it does not take up all the space in edit mode.
    • Default: false
  • Wait for Content Load?: (checkbox) Wait for all the page content to load before Cycler builds itself. This could be useful for dynamic and responsive content. If you turn this off, Cycler will be buitl when the DOM is ready. When turned on, you may see Cycler takes longer to build. However, when turned off, the content may not be sized properly depending on the theme and site design.
    • Default: true

Cycler - Slide Transitions

  • Effect: (select) Name of transition effect
    • Default: scrollHorz (DEFAULT)
    • Possible Values:
      • blindX
      • blindY
      • blindZ
      • blindX, blindY
      • curtainX
      • curtainX
      • curtainY
      • curtainX, curtainY
      • fade
      • fadeZoom
      • growX
      • growY
      • scrollUp
      • scrollDown
      • scrollLeft
      • scrollRight
      • scrollLeft, scrollRight, scrollUp, scrollDown
      • scrollHorz (DEFAULT)
      • scrollVert
      • shuffle
      • slideX
      • slideY
      • slideY, slideX
      • toss
      • turnLeft
      • turnRight
      • wipe
      • zoom
      • Custom
  • Custom Effect: (input) Custom transition effect (or comma separated names, ex: ‘fade,scrollUp,shuffle’) blindX, blindY, blindZ, curtainX, curtainY, fade, fadeZoom, growX, growY, none, scrollUp, scrollDown, scrollLeft, scrollRight, scrollHorz, scrollVert, shuffle, slideX, slideY, toss, turnLeft, turnRight, wipe, zoom
    • Enable: When Effect is set to custom
    • Default: scrollLeft, scrollRight, scrollUp, scrollDown
  • Advanced Effect Settings?: (checkbox) Show more detailed and advanced settings for your effects.
    • Default: false
  • Start at Slide: (number) Start the slideshow at a particular slide instead of the first one. Setting this to 0 will start at the first slide.
    • Enable: When Advanced Effect Settings? is set to true
    • Default: 0
    • Min Value: 0
    • Max Value: 50
  • Stop After: (number) The number of slides to transition to before it stops animating them. Setting to 0 will disable this feature.
    • Enable: When Advanced Effect Settings? is set to true
    • Default: 0
    • Min Value: 0
    • Max Value: 50
  • Wait Time: (number) milliseconds between slide transitions (0 to disable auto advance)
    • Enable: When Advanced Effect Settings? is set to true
    • Default: 4000ms
    • Min Value: 0ms
    • Max Value: 600000ms
  • Animation In: (number) Speed of the transition in
    • Enable: When Advanced Effect Settings? is set to true
    • Default: 1500ms
    • Min Value: 0ms
    • Max Value: 5000ms
  • Animation Out: (number) Speed of the transition out
    • Enable: When Advanced Effect Settings? is set to true
    • Default: 1500ms
    • Min Value: 0ms
    • Max Value: 5000ms
  • Start Delay: (slider) Additional delay (in ms) for first transition. This setting is useful when you have several slideshows on the same page because it provides a way to offset the transitions so they are not competing for the CPU.
    • Enable: When Advanced Effect Settings? is set to true
    • Default: 0ms
    • Min Value: -5000ms
    • Max Value: 5000ms
  • Ease In: (select) The easing effect for transition in.
    • Enable: When Advanced Effect Settings? is set to true
    • Default: None
    • Possible Values:
      • None
      • swing
      • easeInQuad
      • easeOutQuad
      • easeInOutQuad
      • easeInCubic
      • easeOutCubic
      • easeInOutCubic
      • easeInQuart
      • easeOutQuart
      • easeInOutQuart
      • easeInQuint
      • easeOutQuint
      • easeInOutQuint
      • easeInSine
      • easeOutSine
      • easeInOutSine
      • easeInExpo
      • easeOutExpo
      • easeInOutExpo
      • easeInCirc
      • easeOutCirc
      • easeInOutCirc
      • easeInElastic
      • easeOutElastic
      • easeInOutElastic
      • easeInBack
      • easeOutBack
      • easeInOutBack
      • easeInBounce
      • easeOutBounce
      • easeInOutBounce
  • Ease Out: (select) The easing effect for transition out
    • Enable: When Advanced Effect Settings? is set to true
    • Default: None
    • Possible Values:
      • None
      • swing
      • easeInQuad
      • easeOutQuad
      • easeInOutQuad
      • easeInCubic
      • easeOutCubic
      • easeInOutCubic
      • easeInQuart
      • easeOutQuart
      • easeInOutQuart
      • easeInQuint
      • easeOutQuint
      • easeInOutQuint
      • easeInSine
      • easeOutSine
      • easeInOutSine
      • easeInExpo
      • easeOutExpo
      • easeInOutExpo
      • easeInCirc
      • easeOutCirc
      • easeInOutCirc
      • easeInElastic
      • easeOutElastic
      • easeInOutElastic
      • easeInBack
      • easeOutBack
      • easeInOutBack
      • easeInBounce
      • easeOutBounce
      • easeInOutBounce
  • Pause on Hover?: (checkbox) Pause the animation when hovered over.
    • Enable: When Advanced Effect Settings? is set to true
    • Default: true
  • Simultaneous Transition?: (checkbox) If set to false, the next transition will not start until the previous is complete.
    • Enable: When Advanced Effect Settings? is set to true
    • Default: true
  • Wrap Slideshow?: (checkbox) When the last slide is reached, start over at the first slide again?
    • Enable: When Advanced Effect Settings? is set to true
    • Default: true
  • Run Backwards?: (checkbox) Reverse the effects and the slide order.
    • Enable: When Advanced Effect Settings? is set to true
    • Default: false
  • Randomize Slides?: (checkbox) Process slides in a random order.
    • Enable: When Advanced Effect Settings? is set to true
    • Default: false
  • Randomize Effects?: (checkbox) Randomize the effects when there is more than one effect used.
    • Enable: When Advanced Effect Settings? is set to true
    • Default: false

Cycler - Navigation

  • Show Nav Arrows?: (checkbox) Show the Navigation Arrows.
    • Default: false
  • Show Only on Hover?: (checkbox) Only show the navigation arrows when the the mouse hovers over the slider.
    • Enable: When Show Nav Arrows? is set to true
    • Default: false
  • Position: (select) The position of the navigation buttons
    • Enable: When Show Nav Arrows? is set to true
    • Default: Left & Right
    • Possible Values:
      • Left & Right
      • Top & Bottom
  • Horizontal Pos: (slider) The horizontal positioning of the navigation arrows. When the position is Left/Right this is in px. When the position is Top/Bottom this is in %.
    • Enable: When Show Nav Arrows? is set to true
    • Default: 0
    • Min Value: -100
    • Max Value: 100
  • Vertical Pos: (slider) The vertical positioning of the navigation arrows. When the position is Left/Right this is in %. When the position is Top/Bottom this is in px.
    • Enable: When Show Nav Arrows? is set to true
    • Default: 40
    • Min Value: -100
    • Max Value: 100
  • Width: (number) The width of the individual nav image
    • Enable: When Show Nav Arrows? is set to true
    • Default: 75px
    • Min Value: 0px
    • Max Value: 200px
  • Height: (number) The height of the individual nav image
    • Enable: When Show Nav Arrows? is set to true
    • Default: 75px
    • Min Value: 0px
    • Max Value: 600px
  • Nav Sprite: (image) Use a custom image for navigation arrows. Must be a sprite.
    • Enable: When Show Nav Arrows? is set to true
    • Default: %assetPath%/cycler-images/75x75-ChevronLight.png
  • Info: Cycler ships with more sample nav sprites. Find them in the Stacks Media library.

  • Custom Keyboard Nav?: (checkbox) Customize the keyboard navigation from the stack’s default behavior.
    • Default: false
  • Next Keystroke: (select) The keystroke arrow direction that will transition ot the next slide.
    • Enable: When Custom Keyboard Nav? is set to true
    • Default: Key Right
    • Possible Values:
      • Key Left
      • Key Right
      • Key Up
      • Key Down
  • Prev Keystroke: (select) The keystroke arrow direction that will transition ot the previous slide.
    • Enable: When Custom Keyboard Nav? is set to true
    • Default: Key Left
    • Possible Values:
      • Key Left
      • Key Right
      • Key Up
      • Key Down

Cycler - Pagination

  • Style: (select) The style of the pager
    • Default: No Pager
    • Possible Values:
      • No Pager
      • Numbers
      • CSS Bullets
      • Image Bullets
  • Position: (select) The position of the pager
    • Default: Bottom Side - Right
    • Possible Values:
      • Top Side - Center
      • Top Side - Left
      • Top Side - Right
      • Bottom Side - Center
      • Bottom Side - Left
      • Bottom Side - Right
      • Left Side - Top
      • Left Side - Bottom
      • Right Side - Top
      • Right Side - Bottom
  • Custom Pager Position?: (checkbox) Adjust the position of the pager.
    • Default: false
  • Vertical Pos: (slider) Adjust the position of the Pager.
    • Enable: When Custom Pager Position? is set to true
    • Default: 0px
    • Min Value: -100px
    • Max Value: 100px
  • Horizontal Pos: (slider) Adjust the position of the Pager.
    • Enable: When Custom Pager Position? is set to true
    • Default: 0px
    • Min Value: -100px
    • Max Value: 100px
  • Show Only on Hover?: (checkbox) Only show the pager when the the mouse hovers over the slider.
    • Default: false
  • Size: (slider) The size of each navigation bullet
    • Enable: When Style is set to css_bullets
    • Default: 20px
    • Min Value: 10px
    • Max Value: 50px
  • Active Size Offset: (slider) How much smaller to make the active bullet
    • Enable: When Style is set to css_bullets
    • Default: 5px
    • Min Value: 0px
    • Max Value: 10px
  • Round Corners: (slider) The radius of the bullet corners.
    • Enable: When Style is set to css_bullets
    • Default: 12px
    • Min Value: 0px
    • Max Value: 25px
  • Border: (slider) The width of the border
    • Enable: When Style is set to css_bullets
    • Default: 1px
    • Min Value: 0px
    • Max Value: 10px
  • Border: (color)
    • Enable: When Style is set to css_bullets
    • Allows Opacity: false
  • Background: (color) The color of the bullet background
    • Enable: When Style is set to css_bullets
    • Allows Opacity: false
  • Hover: (color) The color of the bullet background when hovered over
    • Enable: When Style is set to css_bullets
    • Allows Opacity: false
  • Active: (color) The color of the active bullet
    • Enable: When Style is set to css_bullets
    • Allows Opacity: false
  • Add Drop Shadow?: (checkbox) Add a drop shadow to the bullets
    • Enable: When Style is set to css_bullets
    • Default: false
  • X-Offset: (slider) The horizontal offset for the shadow
    • Enable: When Add Drop Shadow? is set to true
    • Default: 1px
    • Min Value: 0px
    • Max Value: 5px
  • Y-Offset: (slider) The vertical offset for the shadow
    • Enable: When Add Drop Shadow? is set to true
    • Default: 1px
    • Min Value: 0px
    • Max Value: 5px
  • Blur: (slider) The blur radius for the shadow
    • Enable: When Add Drop Shadow? is set to true
    • Default: 5px
    • Min Value: 0px
    • Max Value: 30px
  • Color: (color) The color of shadow
    • Enable: When Add Drop Shadow? is set to true
    • Allows Opacity: false
  • Size: (slider) The size of each navigation bullet
    • Enable: When Style is set to numbers
    • Default: 20px
    • Min Value: 10px
    • Max Value: 50px
  • Round Corners: (slider) The radius of the bullet corners.
    • Enable: When Style is set to numbers
    • Default: 10px
    • Min Value: 0px
    • Max Value: 25px
  • Border: (slider) The width of the border
    • Enable: When Style is set to numbers
    • Default: 1px
    • Min Value: 0px
    • Max Value: 10px
  • Border: (color)
    • Enable: When Style is set to numbers
    • Allows Opacity: false
  • Background: (color) The color of the bullet background
    • Enable: When Style is set to numbers
    • Allows Opacity: false
  • Text: (color) The color of the bullet text
    • Enable: When Style is set to numbers
    • Allows Opacity: false
  • Active: (color) The color of the active bullet background
    • Enable: When Style is set to numbers
    • Allows Opacity: false
  • Active Text: (color) The color of the active bullet text
    • Enable: When Style is set to numbers
    • Allows Opacity: false
  • Text Shadow: (color) The color of the bullet text shadow
    • Enable: When Style is set to numbers
    • Allows Opacity: false
  • Add Drop Shadow?: (checkbox) Add a drop shadow to the bullets
    • Enable: When Style is set to numbers
    • Default: false
  • X-Offset: (slider) The horizontal offset for the shadow
    • Enable: When Add Drop Shadow? is set to true
    • Default: 1px
    • Min Value: 0px
    • Max Value: 5px
  • Y-Offset: (slider) The vertical offset for the shadow
    • Enable: When Add Drop Shadow? is set to true
    • Default: 1px
    • Min Value: 0px
    • Max Value: 5px
  • Blur: (slider) The blur radius for the shadow
    • Enable: When Add Drop Shadow? is set to true
    • Default: 5px
    • Min Value: 0px
    • Max Value: 30px
  • Color: (color) The color of shadow
    • Enable: When Add Drop Shadow? is set to true
    • Allows Opacity: false
  • Width: (number) The width of the individual bullet image
    • Enable: When Style is set to sprite
    • Default: 15px
    • Min Value: 0px
    • Max Value: 50px
  • Height: (number) The height of the individual bullet image
    • Enable: When Style is set to sprite
    • Default: 15px
    • Min Value: 0px
    • Max Value: 50px
  • Bullet Sprite: (image) Use a custom image for pager bullets. Must be a sprite.
    • Enable: When Style is set to sprite
    • Default: %assetPath%/cycler-images/15x15-pop-blue.png
  • Info: Cycler ships with more bullet sprites available inside the Media Library.