Revolution Slider Content

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

<!-- START REVOLUTION SLIDER 5.0 -->
<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="zoomin" 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="img/slider/slider-bg.jpg"  alt=""  data-bgposition="center center" data-kenburns="on" data-duration="30000" data-ease="Linear.easeNone" data-scalestart="100" data-scaleend="120" data-rotatestart="0" data-rotateend="0" data-offsetstart="0 0" data-offsetend="0 0" data-bgparallax="10" class="rev-slidebg" data-no-retina> 
          <!-- LAYERS --> 
          
          <!-- LAYER NR. 1 -->
          <div class="tp-caption NotGeneric-SubTitle tp-resizeme rs-parallaxlevel-0" 
				id="slide-16-layer-4" 
				data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" 
				data-y="['middle','middle','middle','middle']" data-voffset="['-55','-55','-55','-35']" 
				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:1000;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" 

				style="z-index: 6; white-space: nowrap;">Design - Degital - Delivered</div>
          
          <!-- LAYER NR. 2 -->
          <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="['55','55','45','30']"
				data-lineheight="['50','50','40','25']"
				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:1000;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="chars" 
				data-splitout="none" 
				data-responsive_offset="on" 
				data-elementdelay="0.05" 
				style="z-index: 5; white-space: nowrap;">LET'S KICKSTART YOUR BUSINESS!</div>
          
          
          
          <!-- LAYER NR. 4 -->
          <div class="tp-caption WebProduct-Button rev-btn  rs-parallaxlevel-0 btn-main" 
				id="slide-235-layer-8" 
				data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" 
				data-y="['middle','middle','top','top']" data-voffset="['100','180','430','285']" 
				data-width="none"
				data-height="none"
				data-whitespace="nowrap"
				data-transform_idle="o:1;"
				data-transform_hover="o:1;rX:0;rY:0;rZ:0;z:0;s:300;e:Linear.easeNone;"
				data-transform_in="y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;s:1000;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="3000" 
				data-splitin="none" 
				data-splitout="none" 
				data-actions='[{"event":"click","action":"scrollbelow","offset":"px"}]'
				data-responsive_offset="on" 
				data-responsive="off"
				data-elementdelay="0.05"
				style="z-index: 14; white-space: nowrap;letter-spacing:1px;">GET STARTED TODAY </div>
        </li>
	        <!-- SLIDE  -->
	        <li data-index="rs-19" data-transition="zoomout" data-slotamount="default"  data-easein="Power4.easeInOut" data-easeout="Power4.easeInOut" data-masterspeed="2000"   data-rotate="0"  data-saveperformance="off"  data-title="HTML5 Video" data-description=""> 
	          <!-- MAIN IMAGE --> 
	          <img src="img/slider/slider-bg2.jpg"  alt=""  data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="10" class="rev-slidebg" data-no-retina> 
	          <!-- LAYERS --> 
	          
	          <!-- BACKGROUND VIDEO LAYER -->
	          <div class="rs-background-video-layer" 
					data-forcerewind="on" 
					data-volume="mute" 
					data-videowidth="100%" 
					data-videoheight="100%" 
					data-videopreload="preload" 
					data-videoloop="none" 
					data-forceCover="1" 
					data-aspectratio="16:9" 
					data-autoplay="true" 
					data-autoplayonlyfirsttime="false" 
					data-nextslideatend="true" 
				></div>
	          <!-- LAYER NR. 1 -->
	          <div class="tp-caption tp-shape tp-shapewrapper rs-parallaxlevel-0" 
					 id="slide-19-layer-10" 
					 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-width="full"
					data-height="full"
					data-whitespace="nowrap"
					data-transform_idle="o:1;"
		 
					 data-transform_in="opacity:0;s:2000;e:Power3.easeInOut;" 
					 data-transform_out="opacity:0;s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
					data-start="2000" 
					data-basealign="slide" 
					data-responsive_offset="on" 
					data-responsive="off"
					
					style="z-index: 5;background-color:rgba(0, 0, 0, 0.45);border-color:rgba(0, 0, 0, 0.45);"> </div>
	          
	          <!-- LAYER NR. 2 -->
	          <div class="tp-caption NotGeneric-Title   tp-resizeme rs-parallaxlevel-0" 
					 id="slide-19-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="['70','70','45','35']"
					data-lineheight="['70','70','70','50']"
					data-width="none"
					data-height="none"
					data-whitespace="nowrap"
					data-transform_idle="o:1;"
		 
					 data-transform_in="z:0;rX:0;rY:0;rZ:0;sX:0.9;sY:0.9;skX:0;skY:0;opacity:0;s:1500;e:Power3.easeInOut;" 
					 data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
					 data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" 
					data-start="1000" 
					data-splitin="chars" 
					data-splitout="none" 
					data-responsive_offset="on" 

					data-elementdelay="0.05" 
					
					style="z-index: 6; white-space: nowrap;">START STORY TELLING</div>
	          
	          <!-- LAYER NR. 3 -->
	          <div class="tp-caption NotGeneric-SubTitle   tp-resizeme rs-parallaxlevel-0" 
					 id="slide-19-layer-4" 
					 data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" 
					 data-y="['middle','middle','middle','middle']" data-voffset="['65','65','52','51']" 
								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: 7; white-space: nowrap;">- AND LOTS OF OTHER MEDIA - </div>
	          
	          <!-- LAYER NR. 4 -->
	          <div class="tp-caption NotGeneric-Icon   tp-resizeme rs-parallaxlevel-0" 
					 id="slide-19-layer-8" 
					 data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" 
					 data-y="['middle','middle','middle','middle']" data-voffset="['-68','-68','-55','-55']" 
								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: 8; white-space: nowrap;"><i class="pe-7s-ball"></i> </div>
		        </li>
      		</ul>
    	</div>
  	</div>
<div class="clearfix"></div>
  <!-- END OF SLIDER WRAPPER -->

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 1

How can we help?