Smart Slider 3.2

In Smart Slider 3, you can build your slides from layers. These layers can be positioned anywhere on the canvas, like when you use position: absolute in CSS. Then in Smart Slider 3.1 we introduced layers groups. You were able to select many layers and place then into an invisible group. Then you could animate or move the layers together. But nothing more could be achieved with layer groups.

In Smart Slider 3.2, we would like to introduce new structured elements, which can help you to display content heavy slides. The new elements are the "Content", the "Row and the "Column".

With the new structure elements, we also have to introduce a new definition called placement. Prior Smart Slider 3.2, only one placement was possible called absolute as every layer could be placed anywhere on the canvas. With Smart Slider 3.2, the new placement is called normal placement.

Content area

Content area is a premade unique element on every slide. It is not visible when empty, but if Content has one or more elements, it fills up the entire slide vertically. When you place an element into the content area, that element loses the absolute placement and starts to behave like a normal HTML elements does. When the content area's height is bigger than the slider's height, the content area overrides the height of the slider. This will allow the slider to show every layer and content for your visitors.

  • Content area is not visible when empty.
  • Content area contains Rows and Layers with normal placement.
  • can override the height of the slider, if the slider's height is not enough to display everything.

Settings

  • Maximum width: limits the width of the content to the specified value. When in effect, you can align the content area with position setting.
  • Padding
  • Inner align: sets the align for the children elements.
  • Vertical align: Top, middle, bottom, space around and space between
  • Background

Row

Row element consists of one or more columns. It allows you to order layers into many columns next to each other.

Settings

  • Adjust column's width and add column
  • Gutter: The empty area between the columns
  • Padding
  • Wrap after: Value 0 means never wrap.
    Example: When you have 4 columns in the row and you set wrap after to 2, then the columns will be display in a 2*2 table.
  • Full width: if disabled, the row tries to adjust its width to the content inside.
  • Stretch: When enabled, the row increase its height to fill up the available vertical space.
  • Inner align
  • Background
  • Border radius
  • Box shadow

Column

Column elements are always belong to the parent row. A column can contain multiple layers with normal placement. Columns are similar to the content area except they can not directly adjust the height of the slider. When the column is inside the content area, the content will do the height adjustment.

Column share their settings with the content element, except:

  • columns do not have position.
  • columns has box shadow, borders and border radius.

Working with elements in the slide editor

It was a hard decision, but we had to split the slide editor into two modes.Canvas mode refers to the original way of slide building, where you can move every layer on the canvas. The new mode is the content mode, which allows you to work inside the Content element of the slide.

Canvas mode refers to the original slide editing experience. In this mode you are working with absolute elements on the canvas. When you drag a layer which is inside the content area, that layer transforms into an absolute layer. It will be removed from the content area. You can place it back in the content mode.

Content mode is where you can add and move elements in the content area and its descendants. When you drag an absolute element, the content area will magnetize the layer and place it inside the content.