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

Additional JS Settings

1. Autoplay / Randomize

Disable Autoplay:

jQuery('#rev_slider_1').show().revolution({
 
    stopLoop: 'on',
    stopAfterLoops: 0,
    stopAtSlide: 1,
 
    /* ****************** */
    /* settings continued */
    /* ****************** */
 
});

Auto-Rotate:

jQuery('#rev_slider_1').show().revolution({
 
    stopLoop: 'off',
    stopAfterLoops: -1,
    stopAtSlide: -1,
 
    /* ****************** */
    /* settings continued */
    /* ****************** */
 
});

2. Dotted Overlay / Shadows

Dotted Overlays:

Options are “twoxtwo”, “twoxtwowhite”, “threexthree” and “threexthreewhite”.

jQuery('#rev_slider_1').show().revolution({
 
    /* 2x2 transparent dotted overlay graphic */
    dottedOverlay: 'twoxtwo',
 
    /* ****************** */
    /* settings continued */
    /* ****************** */
 
});

Shadows:

Choose a number between 1-6 to preview the different available shadow options.

jQuery('#rev_slider_1').show().revolution({
 
    /* 1-6 drop-shadow options */
    shadow: 1,
 
    /* ****************** */
    /* settings continued */
    /* ****************** */
 
});

3. Mobile Visibility / Fallbacks

hideThumbsOnMobile
  • on
  • off
Hide thumbnail navigation for mobile devices.
hideSliderAtLimit
    Hide the entire slider below a certain screen size.
    hideCaptionAtLimit
      Hide specific Layers below a certain screen size.
      hideAllCaptionAtLimit
        Hide all Layers below a certain screensize
        fallbacks -> simplifyAll
        • on
        • off
        Convert to simple animations for older iOS and IE.
        fallbacks -> nextSlideOnWindowFocus
        • on
        • off
        Automatically change to the next slide when the user returns after switches tabs/windows.
        fallbacks -> disableFocusListener
        • on
        • off
        Disable the window/tab change event listener.

        jQuery('#rev_slider_1').show().revolution({
         
            hideThumbsOnMobile: 'off',
            hideSliderAtLimit: 0,
            hideCaptionAtLimit: 0,
            hideAllCaptionAtLilmit: 0,
         
            fallbacks: {
                simplifyAll: 'on',
                nextSlideOnWindowFocus: 'off',
                disableFocusListener: false
            }
         
            /* ****************** */
            /* settings continued */
            /* ****************** */
         
        });

        Replace the entire Slider with a simple Image for mobile or IE8

        data-aimg
          The url of the image to be displayed instead of the slider.
          data-amobile
            Use the alternative image on mobile devices.
            data-aie8
              Use the alternative image when IE8 is detected.

              <div class="rev_slider_wrapper"
                   data-aimg="assets/images/notgeneric_bg5.jpg"
                   data-amobile="enabled"
                   data-aie8="disabled">
               
                  <div id="rev_slider_1" class="rev_slider" data-version="5.4.5" style="display:none">
               
                      <ul>
               
                          <!-- BEGIN SLIDE -->
                          <li data-transition="fade">

              4. Stop Slider out of Viewport

              Options that can be used to pause/resume the slider when the slider is scrolled into and out of view on a web page.  And also useful for only starting the slider once its been scrolled into view (for sliders that exist “below the fold”).

              viewport -> enable
              • true
              • false
              Enables the Viewport options.
              viewport -> outof
              • wait
              • pause
              Enter "wait" to start the slider when its scrolled into view, and "pause" to pause/resume the slider when its scrolled into and out of view.
              viewport -> visible_area
                Start/Pause/Resume the slider when it is scrolled out of view by a certain percentage.
                viewport -> presize
                • true
                • false
                Calculate the slider's size ahead of time (used in combination with "viewport -> outof -> wait").

                jQuery('#rev_slider_1').show().revolution({
                 
                    viewPort: {
                        enable: true,
                        outof: 'wait',
                        visible_area: '80%',
                        presize: true
                    },
                 
                    /* ****************** */
                    /* settings continued */
                    /* ****************** */
                 
                });

                Popular Solutions

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