Responsive Setup

Slider Revolution will adjust its size and the size of its content automatically.
But similar to responsive websites, content often looks best when its setup specifically for multiple devices.

Grid Width & Grid Height

The “gridwidth” and “gridheight” settings declare a default size for the slider.  And the slider’s content will resize based on these numbers.

Example #1

  • Slider has an “Auto Responsive” Layout
  • Slider’s “gridwidth” and “gridheight” set to 2000×500
  • Slider is added to a web page’s main content container
  • Web page’s main content container has a “max-width” of 1000px
  • Slider will automatically adjust its size to fit inside it’s parent container
  • Slider’s new width will be 1000px
  • New slider width is 50% of the slider’s “gridwidth”
  • RESULT: Slider’s content will decrease in size by 50%

Example #2

  • Slider has an “Full Width” Layout
  • Slider’s “gridwidth” and “gridheight” set to 2000×500
  • Current screen size is 1000px wide
  • Slider will automatically adjust its width to the current width of the screen
  • Slider’s new width will be 1000px
  • New slider width is 50% of the slider’s “gridwidth”
  • RESULT: Slider’s content will decrease in size by 50%

Dynamic Grid Sizes

In the two example scenarios above, the slider is resized by 50%.  But what if the screen size was reduced even further?  For a text layer with a font-size of 14px, it would become unreadable if resized down by 50% or more.  But this can be corrected with dynamic grid sizes.

Step 1: Choose your breakpoints

A total of 4 responsive levels are available.  These work the same was as CSS media queries, allowing the slider’s content to be adjusted for each screen size.

Step 2: Setup your Dynamic Grid Sizes

Dynamic Grid Widths often work best when they’re identical to the Responsive Levels.

Dynamic Grid Heights are useful for changing the geometry of the slider.  As an example, sliders often look best as horizontal rectangles for traditional monitors.  And likewise, display well as vertical rectangles on Smartphones.

Step 3: Add some Visibility Levels

Visibility Levels add the ability to control which content is displayed at any given screen size.

Step 5: Setup your Layers with responsive settings for each of the 4 new Responsive Levels

  • 1. data-visibilityon off
    Show/hide Layers for each Visibility Level
  • 2. data-fontsize | data-lineheight | data-color | data-textAlignAdjust font properties for each Responsive Level
  • 3. Layer Positioning for each Responsive Level
    • data-xleft center right
      The Layer's horizontal alignment.
    • data-ytop center right
      The Layer's vertical alignment.
    • data-hoffsetHorizontal alignment offset in pixels. Both negative and positive numbers can be used.
    • data-voffsetVertical alignment offset in pixels. Both negative and positive numbers can be used.
  • 4. data-width | data-height | data-whitespaceAdjust Layer Sizing for each Responsive Level.
  • 5. data-paddingtop | data-paddingright | data-paddingbottom | data-paddingleft"data-margintop", "data-marginright", "data-marginbottom" and "data-marginleft" also available.
    Additional options useful for Rows and Columns.
  • 6. Alignment Options
    • data-basealignslide grid
      Use "slide" to align the Layer to the entire slider (usually applicable for Full Width and Full Screen sliders), or "grid" to confine the layer within the Layers Grid
    • data-responsive_offseton off
      Use "on" for elastic offsets, or "off" for locked offsets ("data-hoffset" and "data-voffset").