Slider

Basic slider

To build a slider, first you need to create an object with the row slider classes. Within this object, create the slides by adding another object with class slide . In this object, define the background by adding a class with color or an image with the property style inline. If there is content other than the image on the slider, add it to an object with a slide-body class. In this object you must also guide the alignment of the content.

<div class="row slider">
  <div class="slide" style="background:url('images/banner_japu.png');">
    <div class="slide-body center-align">
      <h4>Slide 1</h4>
      <h6>Center aligned</h6>
      <a href='' class='btn center'>Example</a>
    </div>
  </div>
  <div class="slide fundo-azul">
    <div class="slide-body left-align">
      <h4>Slide 2 - Left aligned</h4>
    </div>
  </div>
  <div class="slide fundo-vermelho">
    <div class="slide-body right-align">
      <h4>Slide 3 - Right aligned</h4>
    </div>
  </div>
</div>