Sliders

Default

First Slider Headline

Second Slider Headline

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="image image-overlay image-zoom" style="background-image:url(path/to/image)"></div>
      <div class="caption text-white">
        <div class="container">
          <div class="row justify-content-center vh-75">
            <div class="col-lg-8 align-self-center text-center" data-swiper-parallax-y="-100%">
              <h1>First Slider Headline</h1>
            </div>
          </div>
        </div>
      </div>
    </div>
    ...
  </div>
  <div class="swiper-pagination"></div>
</div>

Gallery

<div class="gallery">
  <div class="gallery-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="image image-overlay" style="background-image:url(path/to/image)">
        </div>
        <div class="caption text-white" data-swiper-parallax="-100%">
          <div class="container">
            <div class="row align-items-center">
              <div class="col">
                <span class="eyebrow">Santorini, Greece</span>
                <h1 class="display-3">Mediterannian <br>Ressort & Spa</h1>
              </div>
            </div>
          </div>
        </div>
      </div>
      ...
    </div>
  </div>
  <div class="gallery-thumbs">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <h5>Santorini, Greece</h5>
      </div>
      ...
    </div>
  </div>
</div>

Carousel

<div class="swiper-container swiper-container-carousel">
  <div class="swiper-wrapper">
    <div class="swiper-slide bg-dark">
      <div class="image image-gradient-horizontal-light" style="background-image:url(path/to/image)"></div>
      <div class="caption" data-swiper-parallax-y="-100%">
        <div class="container">
          <div class="row align-items-end vh-75">
            <div class="col-md-5 text-white">
              <span class="eyebrow mb-2">Design</span>
              <h2>Design Journal Blog Template</h2>
              <a href="" class="btn btn-with-ico btn-outline-white">Read More <i class="icon-arrow-right2 fs-20"></i></a>
            </div>
          </div>
        </div>
      </div>
    </div>
    ...
  </div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>