Skip to main content

Slider

The Slider is a very advanced slider module with the main purpose of displaying banner images with advanced captions (images, text, videos). Use the Slider if you need sliders in boxed or fullwidth mode and fancy animations for both the main slides and the captions.

General Options

  • Common Settings - See Common Settings
  • Additional Settings
    • Image Dimensions - The main slide image dimensions.
    • Content Dimensions - Defines the slider content dimensions for layer positioning. Leave empty to match Image Dimensions. Input Site Width value from Page Layout Style to match site content width.
    • Auto Height - Keeps slider height proportional to the image. Leave OFF if you want to maintain slider height fixed on fullwidth sliders.
    • Shuffle - Loads slides in random order.
    • Loop - Loops continuously through all slides by loading the first slide after the last. Requires minimum of 3 slides.
    • Slide View - Fullscreen ignores slider dimensions and uses window size. Intended as single module in topmost row.
    • Backdrop - Optional slider background behind the slides, partially visible on some transitions.

Transition

  • Transition - Defines the transition to be used for all slides.
  • Transition Speed - Defines the transition animation speed.
  • Slide Delay - Defines the transition animation delay.
  • Transition Direction - Defines the transition animation direction (horizontal / vertical).

Behavior

  • Touch Swipe - Enables touch gestures control over slides.
  • Mouse Drag - Enables mouse drag gestures control over slides.
  • Autoplay - Enables autoplay mode.
  • Overflow - Slide content overflow outside main slider container.
  • Pause on Hover - Pauses slider Autoplay when mouse is over the slider.
  • Timer - Enables Timer progress bar.

Navigation

  • Arrows - Enables left/right arrows navigation.
  • Bullets - Enables bullets navigation.
  • Thumbs - Enables thumbnails navigation.

Slide Options

  • Item Name - Name of the item seen in admin on the left side of the module to easily describe what that item represents.
  • Status - Status of the item.
  • Type - Type of slide. It can be image, video or custom (solid background only).
  • Slide Image - Image to be used for slide.
  • Image Alt - Image alt tag (for seo purposes).
  • Slide Link - Defines a link for the entire slide.
  • Slide Delay - Overwrites the default Slide Delay defined in General Options.

Layer Options

  • General
    • Layer Name - Name of the layer item seen in admin on the left side of the module to easily describe what that item represents.
    • Layer Status - Status of the layer item.
    • Layer Type - Type of slide. It can be text, image, button, shape, video or hotspot.
    • Text - Text to be used for layer.
    • Text Box Width - Text width.
    • Initial Position - Defines the initial position of the layer.
    • Initial Offset - Defines the initial offset of the layer.
    • Auto Resize - Scales layer automatically based on slider width. Turn OFF to manually change values per breakpoint in the layer styles.
  • Text Styles
    • Visibility - Controls the text visibility.
    • Icon - Adds an icon near text.
    • Responsive Offset - Addd css-based offset which can benefit from the breakpoint rule.
    • Container Styles - Optional container style with common options created in Journal > Styles > Container. Useful when the same styles need to be applied to multiple layers at once.
  • Layer Transitions
    • Transition - Defines the transition to be used when layer comes in view.
    • Distance - Defines the distance to or from the layer should move.
    • Duration - Defines the transition animation speed.
    • Delay - Defines the transition animation delay.
    • Easing - Defines the transition animation easing.
    • Hide Transition - Defines the transition to be used when layer goes out of view.