Revolution Slider Content

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

<!-- START REVOLUTION SLIDER 5.0 -->
<div class="rev_slider_wrapper">
 <div id="tf_rev_slider" class="rev_slider"  data-version="5.0">
  <ul> 
   <li data-transition="random"> 
     <!-- MAIN IMAGE -->
     <img src="img/header_bg/banner-img.jpg"  alt=""  width="1920" height="1280"> 
     <!-- LAYER NR. 1 -->
                
      <!-- layer no 1 -->
      <div class="tp-caption slide-title color tp-resizeme"
      data-x="center" 
      data-hoffset="0" 
      data-y="center" 
      data-voffset="-80"
      data-whitespace="nowrap"
      data-mask_in="x:0px;y:0px;s:inherit;e:inherit;"
      data-start="1800"
      data-transform_in="y:-50;s:700;"
      >
        <h1 class="slider_text text-center">We’re Creative</h1>
      </div>

      <!-- layer no 3 -->
      <div class="tp-caption slide-title tp-resizeme"
      data-x="center" 
      data-hoffset="0" 
      data-y="center" 
      data-voffset="0"
      data-whitespace="nowrap"
      data-mask_in="x:0px;y:0px;s:inherit;e:inherit;"
      data-start="2800"
      data-transform_in="x:-50;s:700;">
      <h1 class="slider_text text-center">We Ensure Quality Design</h1>
      </div>
   </li>
   <li data-transition="random"> 
     <!-- MAIN IMAGE -->
     <img src="img/header_bg/blog-folding-img.jpg"  alt=""  width="1920" height="1280"> 
      <!-- layer no 1 -->
      <div class="tp-caption slide-title color tp-resizeme"
      data-x="center" 
      data-hoffset="0" 
      data-y="center" 
      data-voffset="-100"
      data-whitespace="nowrap"
      data-mask_in="x:0px;y:0px;s:inherit;e:inherit;"
      data-start="1800"
      data-transform_in="y:-50;s:700;"
      >
        <h1 class="text-center">A Creative Agency Template</h1>
      </div>

      <!-- layer no 3 -->
      <div class="tp-caption slide-title tp-resizeme"
      data-x="center" 
      data-hoffset="0" 
      data-y="center" 
      data-voffset="0"
      data-whitespace="nowrap"
      data-mask_in="x:0px;y:0px;s:inherit;e:inherit;"
      data-start="2800"
      data-transform_in="x:-50;s:700;">
      <p class="text-center">Create just what you need for your Perfect Website. Choose from a wide range <br> of Elements & simply put them on our Canvas.</p>
      </div>
   </li>

  </ul> 
 </div><!-- END REVOLUTION SLIDER -->
</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

How can we help?