Revolution Slider Content

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

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

How can we help?