https://www.okler.net/previews/porto...ll-slider.html
Şahsen ben kullanıyorum çok güzel gösteriyor. Aşağıya kodları bırakıyorum fakat her temanın yapısı farklı.
<section class="page-header page-header-modern bg-color-light-scale-1 page-header-md ">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col">
<a href="#" class="portfolio-prev text-decoration-none d-block appear-animation" data-appear-animation="fadeInRightShorter">
<div class="d-flex align-items-center line-height-1">
<i class="fas fa-arrow-left text-dark text-4 me-3"></i>
<div class="d-none d-sm-block line-height-1">
<span class="text-dark opacity-4 text-1">PREVIOUS PROJECT</span>
<h4 class="font-weight-bold text-3 mb-0">Okler Website Design</h4>
</div>
</div>
</a>
</div>
<div class="col">
<div class="row">
<div class="col-md-12 align-self-center p-static order-2 text-center">
<div class="overflow-hidden pb-2">
<h1 class="text-dark font-weight-bold text-9 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="100">Porto Branding</h2>
</div>
</div>
<div class="col-md-12 align-self-center order-1">
<ul class="breadcrumb d-block text-center appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="300">
<li><a href="#">Home</a></li>
<li><a href=""#">Portfolio</a></li>
<li class="active">Small Slider</li>
</ul>
</div>
</div>
</div>
<div class="col">
<a href="#" class="portfolio-next text-decoration-none d-block float-end appear-animation" data-appear-animation="fadeInLeftShorter">
<div class="d-flex align-items-center text-end line-height-1">
<div class="d-none d-sm-block line-height-1">
<span class="text-dark opacity-4 text-1">NEXT PROJECT</span>
<h4 class="font-weight-bold text-3 mb-0">Porto Admin Dev</h4>
</div>
<i class="fas fa-arrow-right text-dark text-4 ms-3"></i>
</div>
</a>
</div>
</div>
</div>
</section>