<div data-next-text="Next" data-prev-text="Prev" class="home-slider">
  <div class="carousel">
    <div data-background="../img/content/home-slider/1.jpg" class="slide item text-center">
      <div data-overlay-color="rgba(0, 0, 0, 0.5)"></div>
      <div class="content">
        <h1 class="white text-uppercase ls-155 no-margin">Slide 1</h1>
      </div>
    </div>
    <div data-background="../img/content/home-slider/6-light.png" class="slide item text-center">
      <div data-background-color="rgba(0, 0, 0, 0.5)"></div>
      <div class="content">
        <h1 class="white text-uppercase ls-155 no-margin">Slide 2</h1>
      </div>
    </div>
    <div data-background="../img/content/home-slider/5-light.png" class="slide text-center">
      <div class="content">
        <h1 class="white text-uppercase ls-155 no-margin">Slide 3</h1>
      </div>
    </div>
  </div>
  <div class="scroll-down"><a href="#!" class="scroll">Scroll down</a></div>
</div>
<div data-next-text="Next" data-prev-text="Prev" class="home-slider">
  <div class="bg-video">
    <video autoplay="" loop="" muted="">
      <source src="../video/train.mp4" type="video/mp4">
    </video>
  </div>
  <div class="carousel">
    <div class="slide item text-center">
      <div></div>
      <div class="content">
        <h1 class="white text-uppercase ls-155 no-margin">Slide 1</h1>
      </div>
    </div>
    <div class="slide item text-center">
      <div></div>
      <div class="content">
        <h1 class="white text-uppercase ls-155 no-margin">Slide 2</h1>
      </div>
    </div>
    <div class="slide text-center">
      <div class="content">
        <h1 class="white text-uppercase ls-155 no-margin">Slide 3</h1>
      </div>
    </div>
  </div>
  <div class="scroll-down"><a href="#!" class="scroll">Scroll down</a></div>
</div>
<div data-next-text="Next" data-prev-text="Prev" class="home-slider">
  <div data-overlay-color data-background="../img/content/home-slider/1.jpg" class="bg-cover">
    <div data-overlay-color="rgba(0, 0, 0, 0.5)"></div>
  </div>
  <div class="carousel">
    <div class="slide item text-center">
      <div></div>
      <div class="content">
        <h1 class="white text-uppercase ls-155 no-margin">Slide 1</h1>
      </div>
    </div>
    <div class="slide item text-center">
      <div></div>
      <div class="content">
        <h1 class="white text-uppercase ls-155 no-margin">Slide 2</h1>
      </div>
    </div>
    <div class="slide text-center">
      <div class="content">
        <h1 class="white text-uppercase ls-155 no-margin">Slide 3</h1>
      </div>
    </div>
  </div>
  <div class="scroll-down"><a href="#!" class="scroll">Scroll down</a></div>
</div>