How can we setup Revolution Slider?

Slider Revolution is a premium slider. It’s gained huge popularity in the web developer community due to its wide range of features and convenience of use.
It allows you to create responsive sliders with numerous animation effects, text, images, videos and many other elements to bring a stunning look to your website with ease.

So, let’s start!

Step 1: HTML Code

 

<div class="rev_slider_wrapper">
                    <div id="rev_slider_1" class="rev_slider" data-version="5.4.5" style="display:none">
                        <ul>
             
                            <li data-index="rs-1" data-transition="fade">
             
                                <!-- Slide's Main BG Image -->
                                <img src="assets/images/transparent.png" alt="Nature" class="rev-slidebg">
             
                                <!-- Layer 1 -->
                                <div class="tp-caption tp-resizeme banner-h1" 
                                    data-x="['left','left','center','center']" data-hoffset="" 
                                    data-y="center" data-voffset="['-60','-100','-300','-350']" 
                                    data-width="['900', '800', '700', '400']"
                                    data-height="['auto', 'auto', 'auto', 'auto']"
                                    data-type="text" 
                                    data-responsive_offset="on" 
                                    data-frames='[{"delay":0,"speed":1500,"frame":"0","from":"x:[-175%];y:0px;z:0;rX:0;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:1;","mask":"x:[100%];y:0;s:inherit;e:inherit;","to":"o:1;","ease":"power3.out"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"power3.inOut"}]'
                                    data-textAlign="['left','left','center','center']"
                                    data-basealign="slide"
                                    data-visibility="['on', 'on', 'on', 'on']"
                                    data-whitespace="['normal', 'normal', 'normal', 'normal']"
                        
                                    style="z-index: 9; white-space: nowrap;">
                                    Find Out Your Best Furniture Here
                                </div>
    
                                 <!-- Layer 2 -->
                                 <div class="tp-caption tp-resizeme banner-p" 
                                    data-x="['left','left','center','center']" data-hoffset="" 
                                    data-y="center" data-voffset="['75','40','-160','-170']" 
                                    data-width="['auto', '500', '500', '380']"
                                    data-height="['auto', 'auto', 'auto', 'auto']"
                                    data-type="text" 
                                    data-responsive_offset="on" 
                                    data-frames='[{"delay":0,"speed":1000,"frame":"0","from":"x:-50px;opacity:0;","to":"o:1;","ease":"power3.inOut"},{"delay":"wait","speed":1000,"frame":"999","to":"auto:auto;","ease":"power3.inOut"}]'
                                    data-textAlign="['left','left','center','center']"
                                    data-basealign="slide"
                                    data-visibility="['on', 'on', 'on', 'on']"
                                    data-whitespace="['nowrap', 'normal', 'normal', 'normal']"
                        
                                    style="z-index: 9; white-space: nowrap;">
                                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <br> labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
                                </div>

                                <!-- Layer 3 -->
                                <div class="tp-caption tp-resizeme" 
                                    data-x="['left','left','center','center']" data-hoffset="" 
                                    data-y="center" data-voffset="['160','150','-40','10']" 
                                    data-width="['auto']"
                                    data-height="['auto']"
                                    data-type="text" 
                                    data-responsive_offset="on" 
                                    data-frames='[{"delay":0,"speed":1200,"frame":"0","from":"x:-50px;opacity:0;","to":"o:1;","ease":"power3.inOut"},{"delay":"wait","speed":1000,"frame":"999","to":"auto:auto;","ease":"power3.inOut"}]'
                                    data-textAlign="['left','left','center','center']"
                                    data-basealign="slide"
                        
                                    style="z-index: 9; white-space: nowrap;">
                                    <a class="common-btn banner-btn" href="shop.html">
                                        Load More Products
                                    </a>
                                </div>

                                <!-- Layer 4 -->
                                <div class="tp-caption tp-resizeme banner-img"
                                    data-x="['right','right','center','center']" data-hoffset="" 
                                    data-y="['top','top','bottom','bottom']" data-voffset="['0','200','140','220']"
                                    data-type="image" 
                                    data-responsive_offset="on" 
                                    data-frames='[{"delay":0,"speed":600,"frame":"0","from":"x:right;","to":"o:1;","ease":"power3.inOut"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"power3.inOut"}]'
                                    data-textAlign="['right','right','center','center']"
                                    data-basealign="slide"

                                    style="z-index: 5;border-width:0px;"><img src="assets/images/banner/banner1.png" alt="Banner" data-ww="['700px','300px','400px','350px']" data-hh="['700px','350px','350px','350px']" data-no-retina> 
                                </div>

                                <!-- Layer 5 -->
                                <div class="tp-caption tp-resizeme"
                                    data-x="['left','left','left','left']" data-hoffset="100" 
                                    data-y="['bottom','bottom','bottom','bottom']" data-voffset="50" 
                                    data-type="image" 
                                    data-responsive_offset="on" 
                                    data-frames='[{"delay":0,"speed":600,"frame":"0","from":"y:bottom;","to":"o:1;","ease":"power3.inOut"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"power3.inOut"}]'
                                    data-textAlign="['right','right','right','right']"

                                    style="z-index: 5;border-width:0px;"><img src="assets/images/banner/banner-shape1.png" alt="Banner" data-ww="50px" data-hh="50px" data-no-retina> 
                                </div>
    
                            </li>
             
                            <li data-index="rs-2" data-transition="fade">
             
                                <!-- Slide'S Main BG Image -->
                                <img src="assets/images/transparent.png" alt="Nature" class="rev-slidebg">
             
                                <!-- Layers 1 -->
                                <div class="tp-caption tp-resizeme banner-h1" 
                                    data-x="['left','left','center','center']" data-hoffset="" 
                                    data-y="center" data-voffset="['-60','-100','-300','-350']" 
                                    data-width="['850', '800', '700', '400']"
                                    data-height="['auto', 'auto', 'auto', 'auto']"
                                    data-type="text" 
                                    data-responsive_offset="on" 
                                    data-frames='[{"delay":0,"speed":1500,"frame":"0","from":"x:[-175%];y:0px;z:0;rX:0;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:1;","mask":"x:[100%];y:0;s:inherit;e:inherit;","to":"o:1;","ease":"power3.out"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"power3.inOut"}]'
                                    data-textAlign="['left','left','center','center']"
                                    data-basealign="slide"
                                    data-visibility="['on', 'on', 'on', 'on']"
                                    data-whitespace="['normal', 'normal', 'normal', 'normal']"
                        
                                    style="z-index: 9; white-space: nowrap;">
                                    Get All Trendy Furniture In One Store
                                </div>
    
                                <!-- Layers 2 -->
                                <div class="tp-caption tp-resizeme banner-p" 
                                    data-x="['left','left','center','center']" data-hoffset="" 
                                    data-y="center" data-voffset="['75','40','-160','-170']" 
                                    data-width="['auto', '500', '500', '380']"
                                    data-height="['auto', 'auto', 'auto', 'auto']"
                                    data-type="text" 
                                    data-responsive_offset="on" 
                                    data-frames='[{"delay":0,"speed":1000,"frame":"0","from":"x:-50px;opacity:0;","to":"o:1;","ease":"power3.inOut"},{"delay":"wait","speed":1000,"frame":"999","to":"auto:auto;","ease":"power3.inOut"}]'
                                    data-textAlign="['left','left','center','center']"
                                    data-basealign="slide"
                                    data-visibility="['on', 'on', 'on', 'on']"
                                    data-whitespace="['nowrap', 'normal', 'normal', 'normal']"
                        
                                    style="z-index: 9; white-space: nowrap;">
                                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <br> labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
                                </div>

                                <!-- Layer 3 -->
                                <div class="tp-caption tp-resizeme" 
                                    data-x="['left','left','center','center']" data-hoffset="" 
                                    data-y="center" data-voffset="['160','150','-40','10']" 
                                    data-width="['auto']"
                                    data-height="['auto']"
                                    data-type="text" 
                                    data-responsive_offset="on" 
                                    data-frames='[{"delay":0,"speed":1200,"frame":"0","from":"x:-50px;opacity:0;","to":"o:1;","ease":"power3.inOut"},{"delay":"wait","speed":1000,"frame":"999","to":"auto:auto;","ease":"power3.inOut"}]'
                                    data-textAlign="['left','left','center','center']"
                                    data-basealign="slide"
                        
                                    style="z-index: 9; white-space: nowrap;">
                                    <a class="common-btn" href="shop.html">
                                        Shop Now
                                    </a>
                                </div>

                                <!-- Layer 4 -->
                                <div class="tp-caption tp-resizeme banner-img"
                                    data-x="['right','right','center','center']" data-hoffset="" 
                                    data-y="['top','top','bottom','bottom']" data-voffset="['0','200','140','220']"
                                    data-type="image" 
                                    data-responsive_offset="on" 
                                    data-frames='[{"delay":0,"speed":600,"frame":"0","from":"x:right;","to":"o:1;","ease":"power3.inOut"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"power3.inOut"}]'
                                    data-textAlign="['right','right','center','center']"
                                    data-basealign="slide"

                                    style="z-index: 5;border-width:0px;"><img src="assets/images/banner/banner2.png" alt="Banner" data-ww="['600px','300px','400px','350px']" data-hh="['700px','350px','350px','350px']" data-no-retina> 
                                </div>
    
                                <!-- Layer 5 -->
                                <div class="tp-caption tp-resizeme"
                                    data-x="['left','left','left','left']" data-hoffset="100" 
                                    data-y="['bottom','bottom','bottom','bottom']" data-voffset="50" 
                                    data-type="image" 
                                    data-responsive_offset="on" 
                                    data-frames='[{"delay":0,"speed":600,"frame":"0","from":"y:bottom;","to":"o:1;","ease":"power3.inOut"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"power3.inOut"}]'
                                    data-textAlign="['right','right','right','right']"

                                    style="z-index: 5;border-width:0px;"><img src="assets/images/banner/banner-shape1.png" alt="Banner" data-ww="50px" data-hh="50px" data-no-retina> 
                                </div>

                            </li>
    
                        </ul>
                    </div>
                </div>

Step 2: CSS Code

    <link rel="stylesheet" type="text/css" href="assets/css/settings.css">
    <link rel="stylesheet" type="text/css" href="assets/css/layers.css">
    <link rel="stylesheet" type="text/css" href="assets/css/navigation.css">

Step 3: JS Code

    <script src="assets/js/jquery.themepunch.tools.min.js"></script>
    <script src="assets/js/jquery.themepunch.revolution.min.js"></script>
    <!-- The following part can be removed on Server for On Demand Loading) --> 
    <script src="assets/js/extensions/revolution.extension.actions.min.js"></script>
    <script src="assets/js/extensions/revolution.extension.carousel.min.js"></script>
    <script src="assets/js/extensions/revolution.extension.kenburn.min.js"></script>
    <script src="assets/js/extensions/revolution.extension.layeranimation.min.js"></script>
    <script src="assets/js/extensions/revolution.extension.migration.min.js"></script>
    <script src="assets/js/extensions/revolution.extension.navigation.min.js"></script>
    <script src="assets/js/extensions/revolution.extension.parallax.min.js"></script>
    <script src="assets/js/extensions/revolution.extension.slideanims.min.js"></script>
    <script src="assets/js/extensions/revolution.extension.video.min.js"></script>


	// Revolution Slider 
	jQuery('#rev_slider_1').show().revolution({
		sliderLayout: 'auto',
		responsiveLevels: [1240, 1024, 778, 480],
		gridwidth: [1240, 1024, 778, 480],
		gridheight: [700, 700, 1000, 1300],
		visibilityLevels:[1240, 1024, 1024, 480],

		navigation: {
			arrows: {
                enable: true,
                style: 'gyges',
				hide_onleave: false,
                
                left: {
                    container: 'layergrid',
                    h_align: 'center',
                    v_align: 'bottom',
                    h_offset: -30,
                    v_offset: 155,
                },
         
                right: {
                    container: 'layergrid',
                    h_align: 'center',
                    v_align: 'bottom',
                    h_offset: 30,
                    v_offset: 155,
                }
			}
		}
	});

That’s it. Happy Coding!

Leave a Reply

Your email address will not be published. Required fields are marked *