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/