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

1. Auto Responsive

Auto Responsive sliders will automatically inherit their parent container’s width, and are great for when you’d like your slider to fit naturally inside your web page’s main content container.

Markup example:

<div class="rev_slider_wrapper">
 
    <div id="rev_slider_1" class="rev_slider" data-version="5.4.5" style="display:none">
 
        <ul>
 
            <!-- BEGIN SLIDE -->
            <li data-transition="fade">
 
                <!-- SLIDE'S MAIN BACKGROUND IMAGE -->
                <img src="assets/images/notgeneric_bg5.jpg" alt="Ocean" class="rev-slidebg">
 
            </li><!-- END SLIDE -->
 
        </ul>
 
    </div>
 
</div>

Auto Responsive example with a "max-width" applied:

<!-- extra wrapper div to apply a max-width -->
<div style="max-width: 960px; margin: 0 auto">
 
    <div class="rev_slider_wrapper">
 
        <div id="rev_slider_1" class="rev_slider" data-version="5.4.5" style="display:none">
 
            <ul>
 
                <!-- BEGIN SLIDE -->
                <li data-transition="fade">
 
                    <!-- SLIDE'S MAIN BACKGROUND IMAGE -->
                    <img src="assets/images/notgeneric_bg5.jpg" alt="Ocean" class="rev-slidebg">
 
                </li><!-- END SLIDE -->
 
            </ul>
 
        </div>
 
    </div>
 
</div>

Complete the Auto-Reponsive setup by setting the "sliderLayout" to "auto" in the slider's main settings script.

jQuery('#rev_slider_1').show().revolution({
 
    /* AUTO RESPONSIVE LAYOUT */
    sliderLayout: 'auto',
 
    /* options continued .... */

2. Full Width

Slider will break out of its parent container to display full-width across the screen.

Markup example:

<!-- "fullwidthbanner-container" class applied slider's wrapper -->
<div class="rev_slider_wrapper fullwidthbanner-container">
 
    <!-- "fullwidthabanner" class applied to slider's main div -->
    <div id="rev_slider_1" class="rev_slider fullwidthabanner" data-version="5.4.5" style="display:none">
 
        <ul>
 
            <!-- BEGIN SLIDE -->
            <li data-transition="fade">
 
                <!-- SLIDE'S MAIN BACKGROUND IMAGE -->
                <img src="assets/images/notgeneric_bg5.jpg" alt="Ocean" class="rev-slidebg">
 
            </li><!-- END SLIDE -->
 
        </ul>
 
    </div>
 
</div>

Complete the Full Width setup by setting the "sliderLayout" to "fullwidth" in the slider's main settings script.

jQuery('#rev_slider_1').show().revolution({
 
    /* FULL WIDTH LAYOUT */
    sliderLayout: 'fullwidth',
 
    /* options continued .... */

3. Full Screen

Slider will break out of its parent container to display full-screen.

Markup example:

<!-- "fullscreen-container" class applied slider's wrapper -->
<div class="rev_slider_wrapper fullscreen-container">
 
    <!-- "fullscreenbanner" class applied to slider's main div -->
    <div id="rev_slider_1" class="rev_slider fullscreenbanner" data-version="5.4.5" style="display:none">
 
        <ul>
 
            <!-- BEGIN SLIDE -->
            <li data-transition="fade">
 
                <!-- SLIDE'S MAIN BACKGROUND IMAGE -->
                <img src="assets/images/notgeneric_bg5.jpg" alt="Ocean" class="rev-slidebg">
 
            </li><!-- END SLIDE -->
 
        </ul>
 
    </div>
 
</div>

Complete the Full Screen setup by setting the "sliderLayout" to "fullscreen" in the slider's main settings script.

jQuery('#rev_slider_1').show().revolution({
 
    /* FULL SCREEN LAYOUT */
    sliderLayout: 'fullscreen',
 
    /* options continued .... */

4. Additional Layout Options

Overflow Hidden:

Prevent content from bleeding outside the slider’s main container.

<div class="rev_slider_wrapper">
 
    <!-- add the "tp-overflow-hidden" class to the slider's main div -->
    <div id="rev_slider_1" class="rev_slider tp-overflow-hidden" data-version="5.4.5" style="display:none">

Respect Aspect Ratio:

Creates a “locked” ratio for the slider, where both the width and height always expand/contract together when the slider resizes.

jQuery('#rev_slider_1').show().revolution({
 
    sliderLayout: 'auto',
 
    /* RESPECT ASPECT RATIO */
    autoHeight: 'on',
 
    /* options continued .... */

Min Height:

Useful for Auto Responsive and Full Width sliders.  Ensures that the slider’s height will never fall below a certain height.

jQuery('#rev_slider_1').show().revolution({
 
    sliderLayout: 'auto',
 
    /* MIN-HEIGHT */
    minHeight: '500',
 
    /* options continued .... */

Disable Force Full-Width:

Applicable for Full Screen sliders that should sit next to a web page’s sidebar.

jQuery('#rev_slider_1').show().revolution({
 
    sliderLayout: 'auto',
 
    /* DISABLE FORCE FULL-WIDTH */
    fullScreenAlignForce: 'off',
 
    /* options continued .... */

Increase / Decrease Fullscreen Height:

Useful for Full Screen sliders that should make room for the page’s header or footer.  This is a jQuery selector which can be written as “#element-id”, “.element-class-name” or “tag-name” (“nav”, “header”, “footer”, etc.) .

jQuery('#rev_slider_1').show().revolution({
 
    sliderLayout: 'auto',
 
    /* OFFSET SLIDER BY THE HEIGHT OF AN ELEMENT */
    fullScreenOffsetContainer: "#page-header",
 
    /* options continued .... */

And/or offset the slider’s height by a fixed percentage or pixel amount:

jQuery('#rev_slider_1').show().revolution({
 
    sliderLayout: 'auto',
 
    /* fullScreenOffsetContainer: "#page-header", */
    /* fullScreenOffset: '100px', */
 
    /* OFFSET SLIDER FULLSCREEN HEIGHT BY 30% */
    fullScreenOffset: '30%',
 
    /* options continued .... */

Popular Solutions

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