We use cookies to offer you a better browsing experience, analyse traffic and personalise content. Read how we use your data in our privacy policy.

Slider

A slider for images, text or any other content

Slider

A slider for images, text or any other content

Slider

A slider for images, text or any other content

Slider

A slider for images, text or any other content

Slider

A slider for images, text or any other content

NEW 1.2.0

Features

  • Use any supported image format
  • Supports warehoused images
  • Use color backdrops
  • Use gradient backdrops

  • Drop in any stack as content
  • Add parallax for cool transitions
  • 3D-Effects: Cube, Cover-Flow, Flip
  • 2D-Effects: Slide, Fade

Concept

Slider consists of a main stack where you set most of the options, a Slide substack and an Element substack which contains everything which goes onto the Slide.

Slider Main Stack

Effect- select the desired effect from the drop-down: Slide, Fade. Cube, Coverflow, Flip.
Cube Effect
Slide Shadows - Turns on slide shadows
Shadow - Enables main slider shadow
Main Shadow Offset - Main shadow offset in px
Shadow Scale - Main shadow scale ratio
Coverflow Effect
Slide Shadows
- Turns on slide shadows
Rotate - Slide rotate in degrees
Stretch - Stretch space between slides (in px)
Depth - Depth offset in px (slides translate in Z axis)
Modifier - Effect multipler
Flip Effect
Slide Shadows
- Turns on slide shadows
Rotate - Slide rotate in degrees
Parallax- prepares the slider for the use of Parallax on the Slide Elements (for Parallax to be visible, it must be enabled on the individual element, see below)
Initial Slide- Index number of initial slide
Vertical Direction - Select this for a vertical slider
Speed - Sets the transition duration
Auto Height - If checked, Slider will adjust its height to the height of the currently active slide
Round Lengths - If checked, rounds slides' width and height to prevent blurry texts on usual resolution screens (if you have such)
Free Mode - if checked, slides will not have fixed positions
Mouse Wheel - Enables navigation through slides using the mouse wheel
Watch Overflow - If checked, Slider will be disabled and hide navigation buttons on case there are not enough slides for sliding
With Navigation - Enables navigation arrows
Nav. Color - Selects the color of the navigation arrows
With Pagination - Enables pagination elements
Type - Select the pagination type: Bullets, Fraction or Progress Bar
Dynamic Bullets - Ideal for bullets-pagination with a lot of slides
Bullets Clickable - Clicking on pagination button will cause transition to appropriate slide
Bullet Color - Sets the bullet color
Bar Color - Set the progress bar color
With Scrollbar - Display a scrollbar for navigation
Hide Scrollbar - Hide scrollbar automatically after user interaction
Scrollbar Draggable - Make scrollbar draggable to allow control of slider position
Snap On Release - Snap slider position to slides when scrollbar is released
Bar Color - Sets the color of the scrollbar
Autoplay - Starts the slideshow automatically
Delay - Delay between transitions (in ms)
Stop On Last Slide - If checked, the slideshow will stop at the last slide
Disable On Interaction - If checked, the slideshow will stop upon user interaction
Reverse Direction - If checked, the direction of the slideshow will be reversed
Space Btween - Distance between slides in px
Slides Per View - Slides visible at the same time in slider's container. Set to 0 for auto behaviour
Slides Per Col - Number of slides per column, for multirow layout
Fill - Defines how slides should fill rows, by column or by row
Slides Per Group - Set numbers of slides to define & enable group sliding. Useful to use with Slides Per View > 1
Center Slides - The active slide will be centered, not on the left side
Offset Before - Add (in px) additional offset before all slides
Offset After - Add (in px) additional offset after all slides
"Grab" Cursor - If checked, the user will see the "grab" cursor when hover on Slider
Loop - Enables continuous loop mode
Additional Slides - Number of slides that will be cloned when creating loop
Fill Group With Blank - Groups with insufficient number of slides are filled with blank slides. Used with "Slides Per Group" parameter
Height - Set to "0%" for "auto" behaviour
Units - Select the units for the Height setting
Pre-Load Images - If enabled Slider will force-load all images
Update On Images Ready - If enabled Slider will be reinitialized after all images are loaded

Slide Sub-Stack

Vert. Position - select the position from Top, Center or Bottom.
Custom Gradient - select Custom Gradient from the drop down. This opens two color selectors: one for the starting color and one for the ending color of the gradient. Additionally, you can set the gradient angle via the Angle slider
Height - Sets the slide height; set to "0" for "auto" behaviour
Units
- Select the unit for the height
For warehoused images, you can select the Warehoused Image option and provide a link to the image via the standard Link Dialog.
Additionally, you can add an Alternative Text.
In non Warehouse-Mode you can either browse to the particular picture or drag and drop it onto the image-well.
Image Tiling - select a tiling option. I you want your image to cover the entire width of the Hero stack, select None
Image Size - select one of the image sizing options
Poition - if your image does not completely cover the Hero stack, select one of the Position options to place your image
AOS-Screen Shot

Slide Element Sub-Stack

Parallax- enables parallax effect on the element
Parallax has to be enabled on the Slider main stack!