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/