The Worlds Most Powerful
WordPress Builder

If you Purchased & Registered a Slider Revolution License you can comfortably upgrade version 5.x to 6.0 from your WordPress Dashboard.

Why Activate Slider Revolution?

Activating Slider Revolution with your Personal Purchase Code will unlock all available Features.

Easy Live Updates
Personal License Key
200+ Template Library
1000+ Object Library
25+ Amazing Add-Ons
1on1 Ticket Support

*Regular License from $29. One License Key required per Domain.

Slider Revolution 6.0 NOW available!

You got several options for your Sliders background

Enhanced Features

Add Parallax movement, a Ken Burns effect, or Instragram-type Filters to your Images.

<!-- BEGIN SLIDE -->
<li data-transition="fade">
 
    <!-- SLIDE'S MAIN BACKGROUND IMAGE -->
    <img src="assets/images/notgeneric_bg5.jpg"
         alt="Ocean"
         class="rev-slidebg"
         data-bgposition="center center"
         data-bgfit="cover"
         data-bgrepeat="no-repeat">
 
</li><!-- END SLIDE -->

Background Image Options:

data-bgposition
    The image's CSS Background Position value
    data-bgfit
    • cover
    • contain
    The image's CSS Background Size value. Use "cover" to fill the entire slider with the image, and "contain" when mixing portrait and landscape images.
    data-bgrepeat
      The image's CSS Background Repeat value.

      Solid Color

      <!-- BEGIN SLIDE -->
      <li data-transition="fade">
       
          <!-- Transparent image with solid color added to the style attribute -->
          <img src="assets/images/transparent.png" class="rev-slidebg" style="background-color: #E7E7E7">
       
      </li><!-- END SLIDE -->

      Transparent

      <!-- BEGIN SLIDE -->
      <li data-transition="fade">
       
          <!-- Load the transparent .png file for transparent backgrounds -->
          <img src="assets/images/transparent.png" class="rev-slidebg">
       
      </li><!-- END SLIDE -->

      Important Note

      YouTube Videos will only play from a live server.

      <!-- BEGIN SLIDE -->
      <li data-transition="fade">
       
          <!-- required for background video, and will serve as the video's "poster/cover" image -->
          <img src="assets/images/notgeneric_bg5.jpg"
               alt="Ocean"
               class="rev-slidebg"
               data-bgposition="center center"
               data-bgfit="cover"
               data-bgrepeat="no-repeat">
       
          <!-- BACKGROUND VIDEO LAYER -->
          <div class="rs-background-video-layer"
               data-ytid="M18TITevyhA" 
               data-volume="100" 
               data-forcerewind="on"
               data-nextslideatend="true" 
               data-videoloop="loopandnoslidestop"
               data-videoattributes="version=3&enablejsapi=1&html5=1&hd=1&wmode=opaque&showinfo=0&rel=0&
               origin=http://www.yourwebsite.com"
       
          ></div>
       
      </li><!-- END SLIDE -->

      YouTube Background Video Options:

      data-ytid
        The YouTube Video ID.
        data-volume
          A number between 0-100.  Enter "mute" for no volume.
          data-forcerewind
          • on
          • off
          Always play the video from the beginning whenever the slide is displayed.
          data-nextslideatend
          • true
          • false
          Choose to automatically change to the next slide when the video ends.
          data-videoloop
          • none
          • loop
          • loopandnoslidestop
          Option to automatically replay the video when it ends.  For the "loopandnoslidestop" option, video will loop, but slider will progress to the next slide accordingly).
          data-videoattributes
            Additional options to pass into the YouTube API.  Enter your website's domain as the "origin" value.

            Important Note

            Vimeo Videos will only play from an online server.

            <!-- BEGIN SLIDE -->
            <li data-transition="fade">
             
                <!-- required for background video, and will serve as the video's "poster/cover" image -->
                <img src="assets/images/notgeneric_bg5.jpg"
                     alt="Ocean"
                     class="rev-slidebg"
                     data-bgposition="center center"
                     data-bgfit="cover"
                     data-bgrepeat="no-repeat">
             
                <!-- BACKGROUND VIDEO LAYER -->
                <div class="rs-background-video-layer"
                     data-vimeoid="30300114"
                     data-volume="100" 
                     data-forcerewind="on"
                     data-nextslideatend="true" 
                     data-videoloop="loopandnoslidestop"
                     data-videoattributes="background=1&title=0&byline=0&portrait=0&api=1"
                ></div>
             
            </li><!-- END SLIDE -->

            Vimeo Background Video Options:

            data-vimeoid
              The Vimeo Video ID.
              data-volume
                A number between 0-100.  Enter "mute" for no volume.
                data-forcerewind
                • on
                • off
                Always play the video from the beginning whenever the slide is displayed.
                data-nextslideatend
                • true
                • false
                Choose to automatically change to the next slide when the video ends.
                data-videoloop
                • none
                • loop
                • loopandnoslidestop
                Option to automatically replay the video when it ends.  For the "loopandnoslidestop" option, video will loop, but slider will progress to the next slide accordingly).
                data-videoattributes
                  Additional options to pass into the Vimeo API.

                  HTML5 Video

                  <!-- BEGIN SLIDE -->
                  <li data-transition="fade">
                   
                      <!-- required for background video, and will serve as the video's "poster/cover" image -->
                      <img src="assets/images/notgeneric_bg5.jpg"
                           alt="Ocean"
                           class="rev-slidebg"
                           data-bgposition="center center"
                           data-bgfit="cover"
                           data-bgrepeat="no-repeat">
                   
                      <!-- HTML5 BACKGROUND VIDEO LAYER -->
                      <div class="rs-background-video-layer"
                           data-videomp4="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
                           data-videopreload="auto"
                           data-volume="100" 
                           data-forcerewind="on"
                           data-nextslideatend="true" 
                           data-videoloop="loopandnoslidestop"
                   
                      ></div>
                   
                  </li><!-- END SLIDE -->

                  HTML5 Background Video Options:

                  data-videomp4
                    The url to your video, in .mp4 format.
                    data-videopreload
                    • none
                    • auto
                    • metadata
                    The HTML Video preload attribute.
                    data-volume
                      A number between 0-100.  Enter "mute" for no volume.
                      data-forcerewind
                      • on
                      • off
                      Always play the video from the beginning whenever the slide is displayed.
                      data-nextslideatend
                      • true
                      • false
                      Choose to automatically change to the next slide when the video ends.
                      data-videoloop
                      • none
                      • loop
                      • loopandnoslidestop
                      Option to automatically replay the video when it ends.  For the "loopandnoslidestop" option, video will loop, but slider will progress to the next slide accordingly).

                      Popular Solutions