Docs - Slider

Home / Doc / Docs - Slider

Slider Revolution for Full Width

Slider Revolution is an All-Purpose Slide Displaying Solution that allows you to show almost any kind of content.

This plugin features tons of unique transition effects, an image preloader, video embedding, autoplay that stops on user interaction and lots of easy to set options to create your own effects. All customization can be handled via jQuery Options, HTML 5 data-attributes and CSS!

Add slider id #rev_slider_4_1, #rev_slider_4_2 and #rev_slider_4_3 to get the Section Slider Revolution full width effect as shown below.

Below listed JS and CSS are used for this feature

  • settings.css
  • layers.css
  • navigation.css
  • js/revoluation/jquery.themepunch.tools.min.js
  • js/revoluation/jquery.themepunch.revolution.min.js
  • js/revoluation/revolution.extension.actions.min.js
  • js/revoluation/revolution.extension.carousel.min.js
  • js/revoluation/revolution.extension.kenburn.min.js
  • js/revoluation/revolution.extension.layeranimation.min.js
  • js/revoluation/revolution.extension.migration.min.js
  • js/revoluation/revolution.extension.navigation.min.js
  • js/revoluation/revolution.extension.parallax.min.js
  • js/revoluation/revolution.extension.slideanims.min.js
  • js/revoluation/revolution.extension.video.min.js
  • js/revoluation/revoluationfunction.js

Add section slider class .fixslider, .halfwidthleft, .halfwidthright, .contentslider, .testimonialright to get the section slider effect as shown below.

Also ensure that slick.css, slick-theme.css, js/slick.js and js/fuction.js are connected for the slider to work as expected.

Homepage Full width Slider

      	<!-- full width slider HTML Structure -->
        
        <div class="slidermain">
        <div id="rev_slider_4_1_wrapper" class="rev_slider_wrapper fullwidthbanner-container" data-alias="classicslider1" style="margin:0px auto;background-color:transparent;padding:0px;margin-top:0px;margin-bottom:0px;">
                <!-- START REVOLUTION SLIDER 5.0.7 auto mode -->
                    <div id="rev_slider_4_1" class="rev_slider fullwidthabanner" style="display:none;" data-version="5.0.7">
                        <ul>    <!-- SLIDE  -->
                            <li data-index="rs-16" data-transition="zoomout" data-slotamount="default"  data-easein="Power4.easeInOut" data-easeout="Power4.easeInOut" data-masterspeed="2000"  data-rotate="0"  data-fstransition="fade" data-fsmasterspeed="1500" data-fsslotamount="7" data-saveperformance="off"  data-title="Intro" data-description="">
                                <!-- MAIN IMAGE -->
                                <img src="images/slider/full-width/slide1.jpg"  alt=""  data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="10" class="rev-slidebg" data-no-retina>
                                <!-- LAYERS -->

                                <!-- LAYER NR. 1 -->
                                <div class="tp-caption NotGeneric-Title   tp-resizeme rs-parallaxlevel-0" 
                                     id="slide-16-layer-1" 
                                     data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" 
                                     data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']" 
                                                data-fontsize="['36','36','36','18']"
                                    data-lineheight="['36','36','36','18']"
                                    data-width="none"
                                    data-height="none"
                                    data-whitespace="nowrap"
                                    data-transform_idle="o:1;"
                         
                                     data-transform_in="y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;s:2000;e:Power4.easeInOut;" 
                                     data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
                                     data-mask_in="x:0px;y:[100%];s:inherit;e:inherit;" 
                                     data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" 
                                    data-start="1000" 
                                    data-splitin="none" 
                                    data-splitout="none" 
                                    data-responsive_offset="on" 

                                    data-elementdelay="0.05" 
                                    
                                    style="z-index: 5; white-space: nowrap;">
                                    <div class="caption-blue"><h1><span>The <strong>Fastest </strong>way to grow your</span></h1></div> 
                                </div>

                                <!-- LAYER NR. 2 -->
                                <div class="tp-caption NotGeneric-Title   tp-resizeme rs-parallaxlevel-0" 
                                     id="slide-16-layer-2" 
                                     data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" 
                                     data-y="['middle','middle','middle','middle']" data-voffset="['70','70','70','70']" 
                                     data-fontsize="['36','36','36','18']"
                                    data-lineheight="['36','36','36','18']"
                                                data-width="none"
                                    data-height="none"
                                    data-whitespace="nowrap"
                                    data-transform_idle="o:1;"
                         
                                     data-transform_in="y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;s:2000;e:Power4.easeInOut;" 
                                     data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
                                     data-mask_in="x:0px;y:[100%];s:inherit;e:inherit;" 
                                     data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" 
                                    data-start="1500" 
                                    data-splitin="none" 
                                    data-splitout="none" 
                                    data-responsive_offset="on" 

                                    
                                    style="z-index: 6; white-space: nowrap;">
                                    <div class="caption-black">
                                        <h1><span>business with <strong>Technology</strong></span></h1>
                                    </div>
                                </div>

                                <!-- LAYER NR. 3 -->
                                <div class="tp-caption NotGeneric-Icon   tp-resizeme rs-parallaxlevel-0" 
                                     id="slide-16-layer-3" 
                                     data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" 
                                     data-y="['middle','middle','middle','middle']" data-voffset="['-68','-68','-68','-68']" 
                                     data-fontsize="['70','70','70','45']"
                                    data-lineheight="['70','70','70','50']"
                                                data-width="none"
                                    data-height="none"
                                    data-whitespace="nowrap"
                                    data-transform_idle="o:1;"
                                        data-style_hover="cursor:default;"
                         
                                     data-transform_in="y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;s:1500;e:Power4.easeInOut;" 
                                     data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
                                     data-mask_in="x:0px;y:[100%];s:inherit;e:inherit;" 
                                     data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" 
                                    data-start="2000" 
                                    data-splitin="none" 
                                    data-splitout="none" 
                                    data-responsive_offset="on" 

                                    
                                    style="z-index: 7; white-space: nowrap;"><i class="pe-7s-refresh"></i> 
                                </div>
                            </li>
                            <!-- SLIDE  -->
                            <li data-index="rs-17" data-transition="zoomout" data-slotamount="default"  data-easein="Power4.easeInOut" data-easeout="Power4.easeInOut" data-masterspeed="2000"  data-rotate="0"  data-fstransition="fade" data-fsmasterspeed="1500" data-fsslotamount="7" data-saveperformance="off"  data-title="Intro" data-description="">
                                <!-- MAIN IMAGE -->
                                <img src="images/slider/full-width/slide2.jpg"  alt=""  data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="10" class="rev-slidebg" data-no-retina>
                                <!-- LAYERS -->

                                <!-- LAYER NR. 1 -->
                                <div class="tp-caption NotGeneric-Title   tp-resizeme rs-parallaxlevel-0" 
                                     id="slide-17-layer-4" 
                                     data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" 
                                     data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']" 
                                                data-fontsize="['36','36','36','18']"
                                    data-lineheight="['36','36','36','18']"
                                    data-width="none"
                                    data-height="none"
                                    data-whitespace="nowrap"
                                    data-transform_idle="o:1;"
                         
                                     data-transform_in="y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;s:2000;e:Power4.easeInOut;" 
                                     data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
                                     data-mask_in="x:0px;y:[100%];s:inherit;e:inherit;" 
                                     data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" 
                                    data-start="1000" 
                                    data-splitin="none" 
                                    data-splitout="none" 
                                    data-responsive_offset="on" 

                                    data-elementdelay="0.05" 
                                    
                                    style="z-index: 5; white-space: nowrap;">
                                    <div class="caption-blue"><h1><span>The <strong>Fastest </strong>way to grow your</span></h1></div> 
                                </div>

                                <!-- LAYER NR. 2 -->
                                <div class="tp-caption NotGeneric-Title   tp-resizeme rs-parallaxlevel-0" 
                                     id="slide-17-layer-5" 
                                     data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" 
                                     data-y="['middle','middle','middle','middle']" data-voffset="['70','70','70','70']" 
                                     data-fontsize="['36','36','36','18']"
                                    data-lineheight="['36','36','36','18']"
                                                data-width="none"
                                    data-height="none"
                                    data-whitespace="nowrap"
                                    data-transform_idle="o:1;"
                         
                                     data-transform_in="y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;s:2000;e:Power4.easeInOut;" 
                                     data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
                                     data-mask_in="x:0px;y:[100%];s:inherit;e:inherit;" 
                                     data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" 
                                    data-start="1500" 
                                    data-splitin="none" 
                                    data-splitout="none" 
                                    data-responsive_offset="on" 

                                    
                                    style="z-index: 6; white-space: nowrap;">
                                    <div class="caption-black">
                                        <h1><span>business with <strong>Technology</strong></span></h1>
                                    </div>
                                </div>

                                <!-- LAYER NR. 3 -->
                                <div class="tp-caption NotGeneric-Icon   tp-resizeme rs-parallaxlevel-0" 
                                     id="slide-16-layer-6" 
                                     data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" 
                                     data-y="['middle','middle','middle','middle']" data-voffset="['-68','-68','-68','-68']" 
                                     data-fontsize="['70','70','70','45']"
                                    data-lineheight="['70','70','70','50']"
                                                data-width="none"
                                    data-height="none"
                                    data-whitespace="nowrap"
                                    data-transform_idle="o:1;"
                                        data-style_hover="cursor:default;"
                         
                                     data-transform_in="y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;s:1500;e:Power4.easeInOut;" 
                                     data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
                                     data-mask_in="x:0px;y:[100%];s:inherit;e:inherit;" 
                                     data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" 
                                    data-start="2000" 
                                    data-splitin="none" 
                                    data-splitout="none" 
                                    data-responsive_offset="on" 

                                    
                                    style="z-index: 7; white-space: nowrap;"><i class="pe-7s-refresh"></i> 
                                </div>
                            </li>
                            <li data-index="rs-18" data-transition="zoomout" data-slotamount="default"  data-easein="Power4.easeInOut" data-easeout="Power4.easeInOut" data-masterspeed="2000"  data-rotate="0"  data-fstransition="fade" data-fsmasterspeed="1500" data-fsslotamount="7" data-saveperformance="off"  data-title="Intro" data-description="">
                                <!-- MAIN IMAGE -->
                                <img src="images/slider/full-width/slide3.jpg"  alt=""  data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="10" class="rev-slidebg" data-no-retina>
                                <!-- LAYERS -->

                                <!-- LAYER NR. 1 -->
                                <div class="tp-caption NotGeneric-Title   tp-resizeme rs-parallaxlevel-0" 
                                     id="slide-18-layer-7" 
                                     data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" 
                                     data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']" 
                                                data-fontsize="['36','36','36','18']"
                                    data-lineheight="['36','36','36','18']"
                                    data-width="none"
                                    data-height="none"
                                    data-whitespace="nowrap"
                                    data-transform_idle="o:1;"
                         
                                     data-transform_in="y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;s:2000;e:Power4.easeInOut;" 
                                     data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
                                     data-mask_in="x:0px;y:[100%];s:inherit;e:inherit;" 
                                     data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" 
                                    data-start="1000" 
                                    data-splitin="none" 
                                    data-splitout="none" 
                                    data-responsive_offset="on" 

                                    data-elementdelay="0.05" 
                                    
                                    style="z-index: 5; white-space: nowrap;">
                                    <div class="caption-blue"><h1><span>The <strong>Fastest </strong>way to grow your</span></h1></div> 
                                </div>

                                <!-- LAYER NR. 2 -->
                                <div class="tp-caption NotGeneric-Title   tp-resizeme rs-parallaxlevel-0" 
                                     id="slide-18-layer-8" 
                                     data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" 
                                     data-y="['middle','middle','middle','middle']" data-voffset="['70','70','70','70']" 
                                     data-fontsize="['36','36','36','18']"
                                    data-lineheight="['36','36','36','18']"
                                                data-width="none"
                                    data-height="none"
                                    data-whitespace="nowrap"
                                    data-transform_idle="o:1;"
                         
                                     data-transform_in="y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;s:2000;e:Power4.easeInOut;" 
                                     data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
                                     data-mask_in="x:0px;y:[100%];s:inherit;e:inherit;" 
                                     data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" 
                                    data-start="1500" 
                                    data-splitin="none" 
                                    data-splitout="none" 
                                    data-responsive_offset="on" 

                                    
                                    style="z-index: 6; white-space: nowrap;">
                                    <div class="caption-black">
                                        <h1><span>business with <strong>Technology</strong></span></h1>
                                    </div>
                                </div>

                                <!-- LAYER NR. 3 -->
                                <div class="tp-caption NotGeneric-Icon   tp-resizeme rs-parallaxlevel-0" 
                                     id="slide-16-layer-9" 
                                     data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" 
                                     data-y="['middle','middle','middle','middle']" data-voffset="['-68','-68','-68','-68']" 
                                     data-fontsize="['70','70','70','45']"
                                    data-lineheight="['70','70','70','50']"
                                                data-width="none"
                                    data-height="none"
                                    data-whitespace="nowrap"
                                    data-transform_idle="o:1;"
                                        data-style_hover="cursor:default;"
                         
                                     data-transform_in="y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;s:1500;e:Power4.easeInOut;" 
                                     data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
                                     data-mask_in="x:0px;y:[100%];s:inherit;e:inherit;" 
                                     data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" 
                                    data-start="2000" 
                                    data-splitin="none" 
                                    data-splitout="none" 
                                    data-responsive_offset="on" 

                                    
                                    style="z-index: 7; white-space: nowrap;"><i class="pe-7s-refresh"></i> 
                                </div>
                            </li>
                            
                        </ul>
                        <div class="tp-static-layers"></div>
                        <div class="tp-bannertimer" style="height: 7px; background-color: rgba(255, 255, 255, 0.25);"></div>    
                    </div>
                </div>
              <div class="divider leftdiv"></div>
              <div class="divider rightdiv"></div>
        </div>

Homepage 2 Full width Slider

      
      <!-- homepage 2 full width slider HTML Structure -->
        
          <div class="slidermain>	
            <div id="rev_slider_4_1_wrapper" class="rev_slider_wrapper fullwidthbanner-container" data-alias="classicslider1" style="margin:0px auto;background-color:transparent;padding:0px;margin-top:0px;margin-bottom:0px;">
                <!-- START REVOLUTION SLIDER 5.0.7 auto mode -->
                    <div id="rev_slider_4_2" class="rev_slider fullwidthabanner" style="display:none;" data-version="5.0.7">
                        <ul><!-- SLIDE  -->
                            <li data-index="rs-16" data-transition="zoomout" data-slotamount="default"  data-easein="Power4.easeInOut" data-easeout="Power4.easeInOut" data-masterspeed="2000"  data-rotate="0"  data-fstransition="fade" data-fsmasterspeed="1500" data-fsslotamount="7" data-saveperformance="off"  data-title="Intro" data-description="">
                                <!-- MAIN IMAGE -->
                                <img src="images/slider/full-width/slide1.jpg"  alt="Slider"  data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="10" class="rev-slidebg" data-no-retina>
                                <!-- LAYERS -->

                                <!-- LAYER NR. 1 -->
                                <div class="tp-caption NotGeneric-Title   tp-resizeme rs-parallaxlevel-0" 
                                     id="slide-16-layer-1" 
                                     data-x="['left','left','left','left']" data-hoffset="['50','50','50','50']" 
                                     data-y="['middle','middle','middle','middle']" data-voffset="['-60','-60','-60','-60']" 
                                                data-fontsize="['30','30','30','18']"
                                    data-lineheight="['36','36','36','18']"
                                    data-width="none"
                                    data-height="none"
                                    data-whitespace="nowrap"
                                    data-transform_idle="o:1;"
                         
                                     data-transform_in="y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;s:2000;e:Power4.easeInOut;" 
                                     data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
                                     data-mask_in="x:0px;y:[100%];s:inherit;e:inherit;" 
                                     data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" 
                                    data-start="1000" 
                                    data-splitin="none" 
                                    data-splitout="none" 
                                    data-responsive_offset="on" 

                                    data-elementdelay="0.05" 
                                    
                                    style="z-index: 5; white-space: nowrap;">
                                    <div class="caption-blue"><h1><span>The <strong>Fastest </strong>way to</span></h1></div> 
                                </div>

                                <!-- LAYER NR. 2 -->
                                <div class="tp-caption NotGeneric-Title   tp-resizeme rs-parallaxlevel-0" 
                                     id="slide-16-layer-2" 
                                     data-x="['left','left','left','left']" data-hoffset="['50','50','50','50']" 
                                     data-y="['middle','middle','middle','middle']"  data-voffset="['8','8','8','8']" 
                                     data-fontsize="['36','36','36','18']"
                                    data-lineheight="['36','36','36','18']"
                                                data-width="none"
                                    data-height="none"
                                    data-whitespace="nowrap"
                                    data-transform_idle="o:1;"
                         
                                     data-transform_in="y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;s:2000;e:Power4.easeInOut;" 
                                     data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
                                     data-mask_in="x:0px;y:[100%];s:inherit;e:inherit;" 
                                     data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" 
                                    data-start="1500" 
                                    data-splitin="none" 
                                    data-splitout="none" 
                                    data-responsive_offset="on" 

                                    
                                    style="z-index: 6; white-space: nowrap;">
                                    <div class="caption-black">
                                        <h1><span>grow your <strong>business</strong></span></h1>
                                    </div>
                                </div>
                                <div class="tp-caption NotGeneric-Title   tp-resizeme rs-parallaxlevel-0" 
                                     id="slide-16-layer-3" 
                                     data-x="['left','left','left','left']" data-hoffset="['50','50','50','50']" 
                                     data-y="['middle','middle','middle','middle']" data-voffset="['90','90','90','90']" 
                                     data-fontsize="['14','14','14','14']"
                                    data-lineheight="['14','14','14','14']"
                                                data-width="none"
                                    data-height="none"
                                    data-whitespace="nowrap"
                                    data-transform_idle="o:1;"
                         
                                     data-transform_in="y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;s:2000;e:Power4.easeInOut;" 
                                     data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
                                     data-mask_in="x:0px;y:[100%];s:inherit;e:inherit;" 
                                     data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" 
                                    data-start="1500" 
                                    data-splitin="none" 
                                    data-splitout="none" 
                                    data-responsive_offset="on" 

                                    
                                    style="z-index: 6; white-space: nowrap;">
                                    <a href="#" class="default-btn">Read More <i class="fa fa-angle-right fa-1x"></i></a>
                                </div>

                                
                            </li>
                            <li data-index="rs-17" data-transition="zoomout" data-slotamount="default"  data-easein="Power4.easeInOut" data-easeout="Power4.easeInOut" data-masterspeed="2000"  data-rotate="0"  data-fstransition="fade" data-fsmasterspeed="1500" data-fsslotamount="7" data-saveperformance="off"  data-title="Intro" data-description="">
                                <!-- MAIN IMAGE -->
                                <img src="images/slider/full-width/slide2.jpg"  alt="Slider"  data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="10" class="rev-slidebg" data-no-retina>
                                <!-- LAYERS -->

                                <!-- LAYER NR. 1 -->
                                <div class="tp-caption NotGeneric-Title   tp-resizeme rs-parallaxlevel-0" 
                                     id="slide-17-layer-1" 
                                     data-x="['left','left','left','left']" data-hoffset="['50','50','50','50']" 
                                     data-y="['middle','middle','middle','middle']" data-voffset="['-60','-60','-60','-60']" 
                                                data-fontsize="['30','30','30','18']"
                                    data-lineheight="['36','36','36','18']"
                                    data-width="none"
                                    data-height="none"
                                    data-whitespace="nowrap"
                                    data-transform_idle="o:1;"
                         
                                     data-transform_in="y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;s:2000;e:Power4.easeInOut;" 
                                     data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
                                     data-mask_in="x:0px;y:[100%];s:inherit;e:inherit;" 
                                     data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" 
                                    data-start="1000" 
                                    data-splitin="none" 
                                    data-splitout="none" 
                                    data-responsive_offset="on" 

                                    data-elementdelay="0.05" 
                                    
                                    style="z-index: 5; white-space: nowrap;">
                                    <div class="caption-blue"><h1><span>The <strong>Fastest </strong>way to</span></h1></div> 
                                </div>

                                <!-- LAYER NR. 2 -->
                                <div class="tp-caption NotGeneric-Title   tp-resizeme rs-parallaxlevel-0" 
                                     id="slide-17-layer-2" 
                                     data-x="['left','left','left','left']" data-hoffset="['50','50','50','50']" 
                                     data-y="['middle','middle','middle','middle']"  data-voffset="['8','8','8','8']" 
                                     data-fontsize="['36','36','36','18']"
                                    data-lineheight="['36','36','36','18']"
                                                data-width="none"
                                    data-height="none"
                                    data-whitespace="nowrap"
                                    data-transform_idle="o:1;"
                         
                                     data-transform_in="y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;s:2000;e:Power4.easeInOut;" 
                                     data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
                                     data-mask_in="x:0px;y:[100%];s:inherit;e:inherit;" 
                                     data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" 
                                    data-start="1500" 
                                    data-splitin="none" 
                                    data-splitout="none" 
                                    data-responsive_offset="on" 

                                    
                                    style="z-index: 6; white-space: nowrap;">
                                    <div class="caption-black">
                                        <h1><span>grow your <strong>business</strong></span></h1>
                                    </div>
                                </div>
                                <div class="tp-caption NotGeneric-Title   tp-resizeme rs-parallaxlevel-0" 
                                     id="slide-17-layer-3" 
                                     data-x="['left','left','left','left']" data-hoffset="['50','50','50','50']" 
                                     data-y="['middle','middle','middle','middle']" data-voffset="['90','90','90','90']" 
                                     data-fontsize="['14','14','14','14']"
                                    data-lineheight="['14','14','14','14']"
                                                data-width="none"
                                    data-height="none"
                                    data-whitespace="nowrap"
                                    data-transform_idle="o:1;"
                         
                                     data-transform_in="y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;s:2000;e:Power4.easeInOut;" 
                                     data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
                                     data-mask_in="x:0px;y:[100%];s:inherit;e:inherit;" 
                                     data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" 
                                    data-start="1500" 
                                    data-splitin="none" 
                                    data-splitout="none" 
                                    data-responsive_offset="on" 

                                    
                                    style="z-index: 6; white-space: nowrap;">
                                    <a href="#" class="default-btn">Read More <i class="fa fa-angle-right fa-1x"></i></a>
                                </div>

                                
                            </li>
                            <li data-index="rs-18" data-transition="zoomout" data-slotamount="default"  data-easein="Power4.easeInOut" data-easeout="Power4.easeInOut" data-masterspeed="2000"  data-rotate="0"  data-fstransition="fade" data-fsmasterspeed="1500" data-fsslotamount="7" data-saveperformance="off"  data-title="Intro" data-description="">
                                <!-- MAIN IMAGE -->
                                <img src="images/slider/full-width/slide3.jpg"  alt="Slider"  data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="10" class="rev-slidebg" data-no-retina>
                                <!-- LAYERS -->

                                <!-- LAYER NR. 1 -->
                                <div class="tp-caption NotGeneric-Title   tp-resizeme rs-parallaxlevel-0" 
                                     id="slide-18-layer-1" 
                                     data-x="['left','left','left','left']" data-hoffset="['50','50','50','50']" 
                                     data-y="['middle','middle','middle','middle']" data-voffset="['-60','-60','-60','-60']" 
                                                data-fontsize="['30','30','30','18']"
                                    data-lineheight="['36','36','36','18']"
                                    data-width="none"
                                    data-height="none"
                                    data-whitespace="nowrap"
                                    data-transform_idle="o:1;"
                         
                                     data-transform_in="y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;s:2000;e:Power4.easeInOut;" 
                                     data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
                                     data-mask_in="x:0px;y:[100%];s:inherit;e:inherit;" 
                                     data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" 
                                    data-start="1000" 
                                    data-splitin="none" 
                                    data-splitout="none" 
                                    data-responsive_offset="on" 

                                    data-elementdelay="0.05" 
                                    
                                    style="z-index: 5; white-space: nowrap;">
                                    <div class="caption-blue"><h1><span>The <strong>Fastest </strong>way to</span></h1></div> 
                                </div>

                                <!-- LAYER NR. 2 -->
                                <div class="tp-caption NotGeneric-Title   tp-resizeme rs-parallaxlevel-0" 
                                     id="slide-18-layer-2" 
                                     data-x="['left','left','left','left']" data-hoffset="['50','50','50','50']" 
                                     data-y="['middle','middle','middle','middle']"  data-voffset="['8','8','8','8']" 
                                     data-fontsize="['36','36','36','18']"
                                    data-lineheight="['36','36','36','18']"
                                                data-width="none"
                                    data-height="none"
                                    data-whitespace="nowrap"
                                    data-transform_idle="o:1;"
                         
                                     data-transform_in="y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;s:2000;e:Power4.easeInOut;" 
                                     data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
                                     data-mask_in="x:0px;y:[100%];s:inherit;e:inherit;" 
                                     data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" 
                                    data-start="1500" 
                                    data-splitin="none" 
                                    data-splitout="none" 
                                    data-responsive_offset="on" 

                                    
                                    style="z-index: 6; white-space: nowrap;">
                                    <div class="caption-black">
                                        <h1><span>grow your <strong>business</strong></span></h1>
                                    </div>
                                </div>
                                <div class="tp-caption NotGeneric-Title   tp-resizeme rs-parallaxlevel-0" 
                                     id="slide-18-layer-3" 
                                     data-x="['left','left','left','left']" data-hoffset="['50','50','50','50']" 
                                     data-y="['middle','middle','middle','middle']" data-voffset="['90','90','90','90']" 
                                     data-fontsize="['14','14','14','14']"
                                    data-lineheight="['14','14','14','14']"
                                                data-width="none"
                                    data-height="none"
                                    data-whitespace="nowrap"
                                    data-transform_idle="o:1;"
                         
                                     data-transform_in="y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;s:2000;e:Power4.easeInOut;" 
                                     data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
                                     data-mask_in="x:0px;y:[100%];s:inherit;e:inherit;" 
                                     data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" 
                                    data-start="1500" 
                                    data-splitin="none" 
                                    data-splitout="none" 
                                    data-responsive_offset="on" 

                                    
                                    style="z-index: 6; white-space: nowrap;">
                                    <a href="#" class="default-btn">Read More <i class="fa fa-angle-right fa-1x"></i></a>
                                </div>

                                
                            </li>
                            <!-- SLIDE  -->
                            
                            
                        </ul>
                        <div class="tp-static-layers"></div>
                        <div class="tp-bannertimer" style="height: 7px; background-color: rgba(255, 255, 255, 0.25);"></div>    
                    </div>
                </div>
		    <div class="dividerfull"></div>
          </div>

Homepage 3 Full width Slider

      
      <!-- homepage 3 full width slider HTML Structure -->
        
        	<div id="rev_slider_4_1_wrapper" class="rev_slider_wrapper fullwidthbanner-container" data-alias="classicslider1" style="margin:0px auto;background-color:transparent;padding:0px;margin-top:0px;margin-bottom:0px;">
                <!-- START REVOLUTION SLIDER 5.0.7 auto mode -->
                    <div id="rev_slider_4_3" class="rev_slider fullwidthabanner" style="display:none;" data-version="5.0.7">
                        <ul><!-- SLIDE  -->
                            <li data-index="rs-16" data-transition="zoomout" data-slotamount="default"  data-easein="Power4.easeInOut" data-easeout="Power4.easeInOut" data-masterspeed="2000"  data-rotate="0"  data-fstransition="fade" data-fsmasterspeed="1500" data-fsslotamount="7" data-saveperformance="off"  data-title="Intro" data-description="">
                                <!-- MAIN IMAGE -->
                                <img src="images/slider/full-width/slide1.jpg"  alt="Slider"  data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="10" class="rev-slidebg" data-no-retina>
                                <!-- LAYERS -->

                                <!-- LAYER NR. 1 -->
                                <div class="tp-caption NotGeneric-Title   tp-resizeme rs-parallaxlevel-0" 
                                     id="slide-16-layer-1" 
                                     data-x="['right','right','right','right']" data-hoffset="['50','50','50','50']" 
                                     data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']" 
                                                data-fontsize="['30','30','30','18']"
                                    data-lineheight="['36','36','36','18']"
                                    data-width="none"
                                    data-height="none"
                                    data-whitespace="nowrap"
                                    data-transform_idle="o:1;"
                         
                                     data-transform_in="y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;s:2000;e:Power4.easeInOut;" 
                                     data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
                                     data-mask_in="x:0px;y:[100%];s:inherit;e:inherit;" 
                                     data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" 
                                    data-start="1000" 
                                    data-splitin="none" 
                                    data-splitout="none" 
                                    data-responsive_offset="on" 

                                    data-elementdelay="0.05" 
                                    
                                    style="z-index: 5; white-space: nowrap;">
                                    <div class="caption-blue">
                                        <h1><span>The <strong>Fastest </strong>way to <br>grow your <strong>business</strong></span></h1>
                                    </div> 
                                </div>
                            </li>
                            <li data-index="rs-17" data-transition="zoomout" data-slotamount="default"  data-easein="Power4.easeInOut" data-easeout="Power4.easeInOut" data-masterspeed="2000"  data-rotate="0"  data-fstransition="fade" data-fsmasterspeed="1500" data-fsslotamount="7" data-saveperformance="off"  data-title="Intro" data-description="">
                                <!-- MAIN IMAGE -->
                                <img src="images/slider/full-width/slide2.jpg"  alt="Slider"  data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="10" class="rev-slidebg" data-no-retina>
                                <!-- LAYERS -->

                                <!-- LAYER NR. 1 -->
                                <div class="tp-caption NotGeneric-Title   tp-resizeme rs-parallaxlevel-0" 
                                     id="slide-17-layer-1" 
                                     data-x="['right','right','right','right']" data-hoffset="['50','50','50','50']" 
                                     data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']" 
                                                data-fontsize="['30','30','30','18']"
                                    data-lineheight="['36','36','36','18']"
                                    data-width="none"
                                    data-height="none"
                                    data-whitespace="nowrap"
                                    data-transform_idle="o:1;"
                         
                                     data-transform_in="y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;s:2000;e:Power4.easeInOut;" 
                                     data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
                                     data-mask_in="x:0px;y:[100%];s:inherit;e:inherit;" 
                                     data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" 
                                    data-start="1000" 
                                    data-splitin="none" 
                                    data-splitout="none" 
                                    data-responsive_offset="on" 

                                    data-elementdelay="0.05" 
                                    
                                    style="z-index: 5; white-space: nowrap;">
                                    <div class="caption-blue">
                                        <h1><span>The <strong>Fastest </strong>way to <br>grow your <strong>business</strong></span></h1>
                                    </div> 
                                </div>
                            </li>
                            <li data-index="rs-18" data-transition="zoomout" data-slotamount="default"  data-easein="Power4.easeInOut" data-easeout="Power4.easeInOut" data-masterspeed="2000"  data-rotate="0"  data-fstransition="fade" data-fsmasterspeed="1500" data-fsslotamount="7" data-saveperformance="off"  data-title="Intro" data-description="">
                                <!-- MAIN IMAGE -->
                                <img src="images/slider/full-width/slide3.jpg"  alt="Slider"  data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="10" class="rev-slidebg" data-no-retina>
                                <!-- LAYERS -->

                                <!-- LAYER NR. 1 -->
                                <div class="tp-caption NotGeneric-Title   tp-resizeme rs-parallaxlevel-0" 
                                     id="slide-18-layer-1" 
                                     data-x="['right','right','right','right']" data-hoffset="['50','50','50','50']" 
                                     data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']" 
                                                data-fontsize="['30','30','30','18']"
                                    data-lineheight="['36','36','36','18']"
                                    data-width="none"
                                    data-height="none"
                                    data-whitespace="nowrap"
                                    data-transform_idle="o:1;"
                         
                                     data-transform_in="y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;s:2000;e:Power4.easeInOut;" 
                                     data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
                                     data-mask_in="x:0px;y:[100%];s:inherit;e:inherit;" 
                                     data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" 
                                    data-start="1000" 
                                    data-splitin="none" 
                                    data-splitout="none" 
                                    data-responsive_offset="on" 

                                    data-elementdelay="0.05" 
                                    
                                    style="z-index: 5; white-space: nowrap;">
                                    <div class="caption-blue">
                                        <h1><span>The <strong>Fastest </strong>way to <br>grow your <strong>business</strong></span></h1>
                                        
                                    </div>
                                </div>
                            </li>
                            <!-- SLIDE  -->
                        </ul>
                        <div class="tp-static-layers"></div>
                        <div class="tp-bannertimer" style="height: 7px; background-color: rgba(255, 255, 255, 0.25);"></div>    
                    </div>
                </div>

Fixed width Slider width touch

slider1
slider21
slider3

  <!-- Fixed width slider HTML Structure -->
  <div class="fixslider">
        <div><img src="images path here"/></div>
        <div><img src="images path here"/></div>	
        <div><img src="images path here"/></div>		
  </div>

Small width Slider Style 1 touch

slider1
slider2
slider3

  <!-- small width slider HTML Structure -->
  <div class="halfwidthleft">
        <div><img src="images path here"/></div>
        <div><img src="images path here"/></div>	
        <div><img src="images path here"/></div>		
  </div>

Small width Slider with Caption Style 2 touch

slider1

Lorem impsum dolor sit amet

consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

slider2

Lorem impsum dolor sit amet

consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

slider3

Lorem impsum dolor sit amet

consectetuer adipiscing elit. Aenean commodo ligula eget dolor.


  <!-- Small width slider with Caption HTML Structure -->
  <div class="halfwidthright">
  		<!-- Slider 1 -->
        <div><img src="images path here"/>
           <div class="caption">
           	<div class="captiontext">
           		<h3><!-- Title goes Here --></div>
		        <p><!-- content goes Here --></p>
           	</div>
           </div>
        </div>
        <!-- Slider 2 -->
        <div><img src="images path here"/>
           <div class="caption">
           	<div class="captiontext">
           		<h3><!-- Title goes Here --></div>
		        <p><!-- content goes Here --></p>
           	</div>
           </div>
        </div>
        <!-- Slider 2 -->
        <div><img src="images path here"/>
           <div class="caption">
           	<div class="captiontext">
           		<h3><!-- Title goes Here --></div>
		        <p><!-- content goes Here --></p>
           	</div>
           </div>
        </div>
        
  </div>

Content slider Style touch

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.


  <!-- content slider HTML Structure -->
  <div class="contentslider">
        <!-- content slider 1 -->
        <div>
            <h3><!-- title Goes Here --></h3>
            <p><!-- content Goes Here --></p>
        </div>
        <!-- content slider 1 -->
        <!-- content slider 2 -->
        <div>
            <h3><!-- title Goes Here --></h3>
            <p><!-- content Goes Here --></p>
        </div>
        <!-- content slider 2 -->
        <!-- content slider 3 -->
        <div>
            <h3><!-- title Goes Here --></h3>
            <p><!-- content Goes Here --></p>
        </div>
        <!-- content slider 3 -->
  </div>

Testimonials Slider touch

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

slider1
Sara Daisy

Art Director

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

slider2
Sara Daisy

Art Director

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

slider3
Sara Daisy

Art Director


  <!-- content slider HTML Structure -->
  <div class="testimonialright">
        <!-- testimonial slider 1 -->
        <div>
            <div class="testimonialbg">
                <p><!-- content Goes Here --></p>
            </div>
            <div class="userimg"><img src="images path here"/></div>
            <div class="usrname">
            	<strong> <!-- strong word here -->  <strong/>
                <p> <!-- content Goes here -->  <p/>
            </div>
        </div>
        <!-- testimonial slider 1 -->
        <!-- testimonial slider 2 -->
        <div>
            <div class="testimonialbg">
                <p><!-- content Goes Here --></p>
            </div>
            <div class="userimg"><img src="images path here"/></div>
            <div class="usrname">
            	<strong> <!-- strong word here -->  <strong/>
                <p> <!-- content Goes here -->  <p/>
            </div>
        </div>
        <!-- testimonial slider 2 -->
        <!-- testimonial slider 3 -->
        <div>
            <div class="testimonialbg">
                <p><!-- content Goes Here --></p>
            </div>
            <div class="userimg"><img src="images path here"/></div>
            <div class="usrname">
            	<strong> <!-- strong word here -->  <strong/>
                <p> <!-- content Goes here -->  <p/>
            </div>
        </div>
        <!-- testimonial slider 3 -->
  </div>

502 - Cosmo Avenue, Suite 55,

New York, CA 9008

Phone - (123) 456 7890

Email - info@envato.com

Get In Touch
Why Choose Us
  • Revenue-Centric
  • Result-Driven
  • Value-based System & Process
  • 100% Secure & Authentic
  • Emphasis on Innovation
  • Unbiased & Uninterrupted Support
  • Timely Project Delivery
  • Trusted Partner
Newsletter Subscribe

Keep up on our always evolving product features and technology. Enter your e-mail and subscribe to our newsletter.

© 2015 Liven. All Rights Reserved.
Top