Boomerang

Hero

  1. Home
  2. Elements
  3. Hero

Fullscreen

<section class="module-cover parallax text-center fullscreen" data-background="assets/images/module-2.jpg" data-overlay="0.6">
   <div class="container">
       <div class="row">
           <div class="col-md-12">
               <h1>Fullscreen</h1>
           </div>
       </div>
   </div>
</section>
section.module-cover.parallax.text-center.fullscreen(data-background="assets/images/module-2.jpg" data-overlay="0.6")
   .container

       .row
           .col-md-12
               h1 Fullscreen

Auto Height

<section class="module-cover parallax text-center " data-background="assets/images/module-3.jpg" data-overlay="0.5">
   <div class="container">
       <div class="row">
           <div class="col-md-12">
               <h1>Auto Height</h1>
           </div>
       </div>
   </div>
</section>
section.module-cover.parallax.text-center(data-background="assets/images/module-3.jpg" data-overlay="0.5")
   .container

       .row
           .col-md-12
               h1 Auto Height
<section class="module-cover-slides" data-module-cover-slides-options="{&quot;animation&quot;: &quot;fade&quot;}">
   <ul class="slides-container">
       <li class="parallax" data-overlay="0.5">
           <img src="assets/images/module-1.jpg" alt="">
           <div class="container">
               <div class="row">
                   <div class="col-md-12">
                       <h1>Slide 1</h1>
                   </div>
               </div>
           </div>
       </li>
       <li class="parallax text-center" data-overlay="0.5">
           <img src="assets/images/module-21.jpg" alt="">
           <div class="container">
               <div class="row">
                   <div class="col-md-12">
                       <h1>Slide 2</h1>
                   </div>
               </div>
           </div>
       </li>
       <li class="parallax text-right" data-overlay="0.7" data-gradient="1">
           <img src="assets/images/module-25.jpg" alt="">
           <div class="container">
               <div class="row">
                   <div class="col-md-12">
                       <h1>Slide 3</h1>
                   </div>
               </div>
           </div>
       </li>
   </ul>
   <div class="slides-navigation">
       <a class="prev" href="#"><span class="ti-angle-left"></span></a>
       <a class="next" href="#"><span class="ti-angle-right"></span></a>
   </div>
</section>
section.module-cover-slides(data-module-cover-slides-options='{"animation": "fade"}')
   ul.slides-container
       li.parallax(data-overlay="0.5")
           img(src="assets/images/module-1.jpg" alt="")
           .container
               .row
                   .col-md-12
                       h1 Slide 1
       li.parallax.text-center(data-overlay="0.5")
           img(src="assets/images/module-21.jpg" alt="")
           .container
               .row
                   .col-md-12
                   h1 Slide 2
       li.parallax.text-right(data-overlay="0.7" data-gradient="1")
           img(src="assets/images/module-25.jpg" alt="")
           .container
               .row
                   .col-md-12
                       h1 Slide 3
   .slides-navigation
       a(href="#" class="prev"): span.ti-angle-left
       a(href="#" class="next"): span.ti-angle-right