Revolution Slider Content

Revolution Slider is used for banner slides in Aviato. Code for slider is given below

<div id="home\_slider\_wrapper" class="rev\_slider\_wrapper fullscreen-container" >
 <div id="home\_slider" class="rev\_slider fullscreenbanner tiny\_bullet\_slider" data-version="5.4.1">
 <ul> <!– SLIDE –>
 <li data-index="rs-73"  
 data-thumb="images/slider/slider-1.jpg"  
 data-transition="fade"  
 data-slotamount="default"  
 data-hideafterloop="0"  
 data-hideslideonmobile="off"  
 data-easein="default"  
 data-easeout="default"  
 data-masterspeed="300"  
 data-rotate="0"  
 data-saveperformance="off"  
 data-title="Slide"  
 data-param1=""  
 data-param2=""  
 data-param3=""  
 data-param4="" data-param5=""  
 data-param6=""  
 data-param7=""  
 data-param8=""  
 data-param9=""  
 data-param10=""  
 data-description="">
 <!– MAIN IMAGE –>
 <img src="images/slider/slider-1.jpg"  
 data-bgposition="cover"  
 data-bgfit="cover"  
 data-bgrepeat="no-repeat"  
 data-bgparallax="on"  
 class="rev-slidebg"  
 data-no-retina  
 alt="Slider image" />
 <!– LAYERS –>

 <!– LAYER NR. 1 –>
 <a href="shop.html"  
 class="tp-caption rev-btn tp-resizeme"  
 data-x="\[‘left’,’left’,’left’,’left’\]"  
 data-hoffset="\[‘170′,’120′,’70’,’40’\]"  
 data-y="\[‘middle’,’middle’,’middle’,’middle’\]"  
 data-voffset="\[‘150′,’150′,’150′,’110′\]"  
 data-width="150px"  
 data-height="50px"  
 data-whitespace="normal"  
 data-type="button"  
 data-responsive\_offset="on"  
 data-frames='\[{"delay":500,"speed":1000,"sfxcolor":"#ffff58","sfx\_effect":"blockfromleft","frame":"0","from":"z:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":500,"sfxcolor":"#ffffff","sfx\_effect":"blocktoleft","frame":"999","to":"z:0;","ease":"Power4.easeOut"},{"frame":"hover","speed":"0","ease":"Linear.easeNone","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgb(0,0,0);bg:rgb(255,255,255);"}\]’  
 data-textAlign="\[‘center’,’center’,’center’,’center’\]"  
 data-paddingtop="\[6,6,6,6\]"

 style="z-index: 5; font-size: 22px; line-height: 50px; font-weight: 400; color: rgba(255,255,255,1); letter-spacing: 2px;font-family:Roboto Condensed;border-color:rgb(255,255,255);border-style:solid;border-width:1px 1px 1px 1px;outline:none;box-shadow:none;cursor:pointer;text-align:center">Shop Now</a>

 <!– LAYER NR. 3 –>
 <div class="tp-caption tp-resizeme"  
 id="slide-73-layer-3"  
 data-x="\[‘left’,’left’,’left’,’left’\]" data-hoffset="\[‘150′,’100′,’50’,’20’\]"  
 data-y="\[‘middle’,’middle’,’middle’,’middle’\]" data-voffset="\[‘-177′,’-177′,’-177′,’-157′\]"  
 data-width="none"  
 data-height="none"  
 data-whitespace="normal"

 data-type="text"  
 data-responsive\_offset="on"

 data-frames='\[{"delay":300,"speed":750,"sfxcolor":"#ffff58","sfx\_effect":"blockfromleft","frame":"0","from":"z:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":500,"sfxcolor":"#ffffff","sfx\_effect":"blocktoleft","frame":"999","to":"z:0;","ease":"Power4.easeOut"}\]’  
 data-textAlign="\[‘left’,’left’,’left’,’left’\]"  
 data-paddingtop="\[10,10,10,10\]"  
 data-paddingright="\[20,20,20,20\]"  
 data-paddingbottom="\[10,10,10,10\]"  
 data-paddingleft="\[20,20,20,20\]"

 style="z-index: 7; white-space: normal; font-size: 20px; line-height: 20px; font-weight: 400; color: #ffffff; letter-spacing: 10px;font-family:Roboto Condensed;">PRODUCTS </div>

 <!– LAYER NR. 4 –>
 <div class="tp-caption tp-resizeme"  
 id="slide-73-layer-2"  
 data-x="\[‘left’,’left’,’left’,’left’\]" data-hoffset="\[‘150′,’100′,’50’,’20’\]"  
 data-y="\[‘middle’,’middle’,’middle’,’middle’\]" data-voffset="\[‘-30′,’-30′,’-30′,’-30′\]"  
 data-fontsize="\[’70’,’70’,’70’,’50’\]"  
 data-lineheight="\[’70’,’70’,’70’,’50’\]"  
 data-width="\[‘650′,’650′,’620′,’380′\]"  
 data-height="none"  
 data-whitespace="normal"

 data-type="text"  
 data-responsive\_offset="on"

 data-frames='\[{"delay":200,"speed":750,"sfxcolor":"#ffff58","sfx\_effect":"blockfromleft","frame":"0","from":"z:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":500,"sfxcolor":"#ffffff","sfx\_effect":"blocktoleft","frame":"999","to":"z:0;","ease":"Power4.easeOut"}\]’  
 data-textAlign="\[‘left’,’left’,’left’,’left’\]"  
 data-paddingtop="\[20,20,20,20\]"  
 data-paddingright="\[20,20,20,20\]"  
 data-paddingbottom="\[30,30,30,30\]"  
 data-paddingleft="\[20,20,20,20\]"

 style="z-index: 8; min-width: 650px; max-width: 650px; white-space: normal; font-size: 70px; line-height: 70px; font-weight: 400; color: #ffffff; letter-spacing: -2px;font-family:Playfair Display;">The force of nature felt in waves crashing. </div>
 </li>
 <!– SLIDE –>
 <li data-index="rs-74"  
 data-transition="fade"  
 data-slotamount="default"  
 data-hideafterloop="0"  
 data-hideslideonmobile="off"  
 data-easein="default"  
 data-easeout="default"  
 data-masterspeed="300"  
 data-thumb="images/slider/slider-3.jpg"  
 data-rotate="0"  
 data-saveperformance="off"  
 data-title="Slide">
 <!– MAIN IMAGE –>
 <img src="images/slider/slider-3.jpg" alt=""  
 data-bgposition="cover"  
 data-bgfit="cover"  
 data-bgrepeat="no-repeat"  
 data-bgparallax="on"  
 class="rev-slidebg" data-no-retina />
 <!– LAYERS –>

 <!– LAYER NR. 6 –>
 <a  
 href="shop.html"  
 class="tp-caption rev-btn tp-resizeme"  
 data-x="\[‘left’,’left’,’left’,’left’\]"  
 data-hoffset="\[‘880′,’760′,’600′,’330’\]"  
 data-y="\[‘middle’,’middle’,’middle’,’middle’\]"  
 data-voffset="\[‘120′,’250′,’150′,’110′\]"  
 data-width="150px"  
 data-height="50px"  
 data-whitespace="normal"  
 data-type="button"  
 data-responsive\_offset="on"  
 data-frames='\[{"delay":500,"speed":750,"sfxcolor":"#cbbacc","sfx\_effect":"blockfromright","frame":"0","from":"z:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":500,"sfxcolor":"#ffffff","sfx\_effect":"blocktoright","frame":"999","to":"z:0;","ease":"Power4.easeOut"},{"frame":"hover","speed":"0","ease":"Linear.easeNone","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgb(0,0,0);bg:rgb(255,255,255);"}\]’  
 data-textAlign="\[‘center’,’center’,’center’,’center’\]"  
 data-paddingtop="\[8,8,8,8\]"

 style="z-index: 6; white-space: normal; font-size: 22px; line-height: 50px; font-weight: 400; color: rgba(255,255,255,1); letter-spacing: 2px;font-family:Roboto Condensed;border-color:rgb(255,255,255);border-style:solid;border-width:1px 1px 1px 1px;outline:none;box-shadow:none;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;cursor:pointer;">Shop Now</a>

 <!– LAYER NR. 7 –>
 <div class="tp-caption tp-resizeme"  
 id="slide-74-layer-3"  
 data-x="\[‘left’,’left’,’left’,’left’\]" data-hoffset="\[‘820′,’700′,’540′,’270’\]"  
 data-y="\[‘middle’,’middle’,’middle’,’middle’\]" data-voffset="\[‘-177′,’-177′,’-177′,’-157′\]"  
 data-width="none"  
 data-height="none"  
 data-whitespace="normal"  
 data-type="text"  
 data-responsive\_offset="on"  
 data-frames='\[{"delay":400,"speed":750,"sfxcolor":"#cbbacc","sfx\_effect":"blockfromright","frame":"0","from":"z:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":500,"sfxcolor":"#ffffff","sfx\_effect":"blocktoright","frame":"999","to":"z:0;","ease":"Power4.easeOut"}\]’  
 data-textAlign="\[‘left’,’left’,’left’,’left’\]"  
 data-paddingtop="\[10,10,10,10\]"  
 data-paddingright="\[20,20,20,20\]"  
 data-paddingbottom="\[10,10,10,10\]"  
 data-paddingleft="\[20,20,20,20\]"

 style="z-index: 7; white-space: normal; font-size: 20px; line-height: 20px; font-weight: 400; color: #ffffff; letter-spacing: 10px;font-family:Roboto Condensed;">PRODUCTS </div>

 <!– LAYER NR. 8 –>
 <div class="tp-caption tp-resizeme"  
 id="slide-74-layer-2"  
 data-x="\[‘left’,’left’,’left’,’left’\]" data-hoffset="\[‘360′,’240′,’110′,’80’\]"  
 data-y="\[‘middle’,’middle’,’middle’,’middle’\]" data-voffset="\[‘-30′,’-30′,’-30′,’-30′\]"  
 data-fontsize="\[’70’,’70’,’70’,’50’\]"  
 data-lineheight="\[’70’,’70’,’70’,’50’\]"  
 data-width="\[‘650′,’650′,’620′,’380′\]"  
 data-height="none"  
 data-whitespace="normal"  
 data-type="text"  
 data-responsive\_offset="on"  
 data-frames='\[{"delay":300,"speed":750,"sfxcolor":"#cbbacc","sfx\_effect":"blockfromright","frame":"0","from":"z:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":500,"sfxcolor":"#ffffff","sfx\_effect":"blocktoright","frame":"999","to":"z:0;","ease":"Power4.easeOut"}\]’  
 data-textAlign="\[‘right’,’right’,’right’,’right’\]"  
 data-paddingtop="\[20,20,20,20\]"  
 data-paddingright="\[20,20,20,20\]"  
 data-paddingbottom="\[30,30,30,30\]"  
 data-paddingleft="\[20,20,20,20\]"

 style="z-index: 8; min-width: 650px; max-width: 650px; white-space: normal; font-size: 70px; line-height: 70px; font-weight: 400; color: #ffffff; letter-spacing: -2px;font-family:Playfair Display;">The beauty of nature is hidden in details.  
 </div>
 </li>
 <!– SLIDE –>
 <li data-index="rs-75"  
 data-transition="fade"  
 data-slotamount="default"  
 data-hideafterloop="0"  
 data-hideslideonmobile="off"  
 data-easein="default"  
 data-easeout="default"  
 data-masterspeed="300"  
 data-thumb="images/slider/slider-2.jpg"  
 data-rotate="0"  
 data-saveperformance="off"  
 data-title="Slide"  
 data-param1=""  
 data-param2=""  
 data-param3=""  
 data-param4=""  
 data-param5=""  
 data-param6=""  
 data-param7=""  
 data-param8=""  
 data-param9=""  
 data-param10=""  
 data-description="">
 <!– MAIN IMAGE –>
 <img src="images/slider/slider-2.jpg"  
 data-bgposition="center center"  
 data-bgfit="cover"  
 data-bgrepeat="no-repeat"  
 data-bgparallax="on"  
 class="rev-slidebg"  
 data-no-retina alt="slider img" />
 <!– LAYERS –>

 <!– LAYER NR. 10 –>
 <div class="tp-caption tp-resizeme"  
 id="slide-75-layer-2"  
 data-x="\[‘center’,’center’,’center’,’center’\]"  
 data-hoffset="\[‘0′,’0′,’0′,’0’\]"  
 data-y="\[‘middle’,’middle’,’middle’,’middle’\]"  
 data-voffset="\[‘-100′,’-100′,’-100′,’-90′\]"  
 data-fontsize="\[’70’,’70’,’70’,’50’\]"  
 data-lineheight="\[’70’,’70’,’70’,’50’\]"  
 data-width="\[‘650′,’650′,’620′,’380′\]"  
 data-height="none"  
 data-whitespace="normal"  
 data-type="text"  
 data-responsive\_offset="on"  
 data-frames='\[{"delay":200,"speed":750,"sfxcolor":"#058a9b","sfx\_effect":"blockfromtop","frame":"0","from":"z:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":500,"sfxcolor":"#ffffff","sfx\_effect":"blocktotop","frame":"999","to":"z:0;","ease":"Power4.easeOut"}\]’  
 data-textAlign="\[‘center’,’center’,’center’,’center’\]"  
 data-paddingtop="\[20,20,20,20\]"  
 data-paddingright="\[20,20,20,20\]"  
 data-paddingbottom="\[30,30,30,30\]"  
 data-paddingleft="\[20,20,20,20\]"

 style="z-index: 6; min-width: 650px; max-width: 650px; white-space: normal; font-size: 70px; line-height: 70px; font-weight: 400; color: #ffffff; letter-spacing: -2px;font-family:Playfair Display;">Lurking in the deep of the sea, waits a monster. </div>

 <!– LAYER NR. 11 –>
 <div class="tp-caption tp-resizeme"  
 id="slide-75-layer-3"  
 data-x="\[‘center’,’center’,’center’,’center’\]"  
 data-hoffset="\[‘0′,’0′,’0′,’0’\]"  
 data-y="\[‘middle’,’middle’,’middle’,’middle’\]"  
 data-voffset="\[‘-247′,’-247′,’-247′,’-217′\]"  
 data-width="none"  
 data-height="none"  
 data-whitespace="normal"  
 data-type="text"  
 data-responsive\_offset="on"  
 data-frames='\[{"delay":300,"speed":750,"sfxcolor":"#058a9b","sfx\_effect":"blockfromtop","frame":"0","from":"z:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":500,"sfxcolor":"#ffffff","sfx\_effect":"blocktotop","frame":"999","to":"z:0;","ease":"Power4.easeOut"}\]’  
 data-textAlign="\[‘left’,’left’,’left’,’left’\]"  
 data-paddingtop="\[10,10,10,10\]"  
 data-paddingright="\[20,20,20,20\]"  
 data-paddingbottom="\[10,10,10,10\]"  
 data-paddingleft="\[20,20,20,20\]"

 style="z-index: 7; white-space: normal; font-size: 20px; line-height: 20px; font-weight: 400; color: #ffffff; letter-spacing: 10px;font-family:Roboto Condensed;">PRODUCTS </div>

 <!– LAYER NR. 12 –>
 <div class="tp-caption rev-btn tp-resizeme"  
 data-x="\[‘center’,’center’,’center’,’center’\]"  
 data-hoffset="\[‘0′,’0′,’0′,’0’\]"  
 data-y="\[‘middle’,’middle’,’middle’,’middle’\]"  
 data-voffset="\[’80’,’80’,’80’,’50’\]"  
 data-width="150px"  
 data-height="50px"  
 data-whitespace="normal"  
 data-type="button"  
 data-responsive\_offset="on"  
 data-frames='\[{"delay":400,"speed":750,"sfxcolor":"#058a9b","sfx\_effect":"blockfromtop","frame":"0","from":"z:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":500,"sfxcolor":"#ffffff","sfx\_effect":"blocktotop","frame":"999","to":"z:0;","ease":"Power4.easeOut"},{"frame":"hover","speed":"0","ease":"Linear.easeNone","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgb(0,0,0);bg:rgb(255,255,255);"}\]’  
 data-textAlign="\[‘center’,’center’,’center’,’center’\]"  
 data-paddingtop="\[6,6,6,6\]"  
 style="z-index: 8; white-space: normal; font-size: 22px; line-height: 50px; font-weight: 400; color: rgba(255,255,255,1); letter-spacing: 2px;font-family:Roboto Condensed;border-color:rgb(255,255,255);border-style:solid;border-width:1px 1px 1px 1px;outline:none;box-shadow:none;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;cursor:pointer;text-align:center!important;">Shop Now  
 </div>
 </li>
 </ul>
 <div class="tp-bannertimer" style="height: 10px; background: rgba(0, 0, 0, 0.15);"></div>
 </div>
</div><!– END REVOLUTION SLIDER –>

Change background image of slider from img tag. And Edit captions in tp-caption class layers.

For more check the revo slider documentation – https://www.themepunch.com/revslider-doc/slider-revolution-documentation/

Improve this page on Github  — Last updated:  Thu, Oct 19, 2023