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/

Was this article helpful to you? Yes No

How can we help?