But similar to responsive websites, content often looks best when its setup specifically for multiple devices.

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.

• 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%

• 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%

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.

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 .... */

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 .... */

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 .... */

<!-- 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 -->