<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>
<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>
<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>