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/

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