Revolution Slider Content

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

[code language=”html”]
<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 –>
[/code]

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/

Was this article helpful to you? Yes No

How can we help?