Looking for mind-blowing effects? 🤯 Explore Slider Revolution's advanced WebGL animations

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

jQuery('#rev_slider_1').show().revolution({
 
    /* default slider width */
    gridwidth: 1000,
 
    /* default slider height */
    gridheight: 500,
 
    /* options continued .... */

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.

jQuery('#rev_slider_1').show().revolution({
 
    /* [DESKTOP, LAPTOP, TABLET, SMARTPHONE] */
    responsiveLevels: [1240, 1024, 778, 480],
 
    /* options continued .... */

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.

jQuery('#rev_slider_1').show().revolution({
 
    responsiveLevels: [1240, 1024, 778, 480],
 
    /* [DESKTOP, LAPTOP, TABLET, SMARTPHONE] */
    gridwidth:[1240, 1024, 778, 480],
 
    /* [DESKTOP, LAPTOP, TABLET, SMARTPHONE] */
    gridheight:[400, 768, 960, 720],
 
    /* options continued .... */

Step 3: Add some Visibility Levels

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

jQuery('#rev_slider_1').show().revolution({
 
    responsiveLevels: [1240, 1024, 778, 480],
    gridwidth:[1240, 1024, 778, 480],
    gridheight:[400, 768, 960, 720],
 
    /* [DESKTOP, LAPTOP, TABLET, SMARTPHONE] */
    visibilityLevels:[1240, 1024, 1024, 480],
 
    /* options continued .... */

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

<!-- Text Layer Responsive Properties -->
<div class="tp-caption tp-resizeme largewhitebg"
 
    data-frames='[{"delay":0,"speed":300,"frame":"0","from":"opacity:0;","to":"o:1;","ease":"Linear"},
                  {"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Linear"}]'
 
    data-visibility="['on', 'on', 'on', 'on']"
 
    data-fontsize="['24', '24', '22', '18']"
    data-lineheight="['32', '32', '32', '24']"
    data-color="['#FFF', '#FFF', '#000', '#000']"
    data-textAlign="['inherit', 'inherit', 'right', 'center']"
 
    data-x="['center', 'center', 'right', 'center']"
    data-y="['middle', 'middle', 'top', 'bottom']"
    data-hoffset="['0', '0', '50', '0']"
    data-voffset="['0', '0', '50', '50']"
 
    data-width="['800', '800', '600', '400']"
    data-height="['auto', 'auto', 'auto', 'auto']"
    data-whitespace="['normal', 'normal', 'nowrap', 'normal']"
 
    data-paddingtop="[0, 0, 0, 0]"
    data-paddingright="[0, 0, 0, 0]"
    data-paddingbottom="[0, 0, 0, 0]"
    data-paddingleft="[0, 0, 0, 0]"
 
    data-basealign="slide"
    data-responsive_offset="off"
 
>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum luctus felis porta dui rhoncus lobortis. In aliquet, arcu ut bibendum molestie, massa nisl varius nunc, non tempus mi dolor vitae eros</div>
<!-- END LAYER -->

1. data-visibility
  • on
  • off
Show/hide Layers for each Visibility Level
2. data-fontsize | data-lineheight | data-color | data-textAlign
    Adjust font properties for each Responsive Level
    3. Layer Positioning for each Responsive Level
    data-x
    • left
    • center
    • right
    The Layer's horizontal alignment.
    data-y
    • top
    • center
    • right
    The Layer's vertical alignment.
    data-hoffset
      Horizontal alignment offset in pixels. Both negative and positive numbers can be used.
      data-voffset
        Vertical alignment offset in pixels. Both negative and positive numbers can be used.
        4. data-width | data-height | data-whitespace
          Adjust 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-basealign
            • slide
            • 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_offset
            • on
            • off
            Use "on" for elastic offsets, or "off" for locked offsets ("data-hoffset" and "data-voffset").

            Popular Solutions

            [ess_grid alias="wp-popular-solutions"]
            Impressum | Datenschutz