Hero Slider is powerd by slick slider. for more slider item, just copy and paste slider-item and change your content. you can customize slider animation by change the value of data-animation-in, data-duration-in, data-delay-in and for slider content out animation, you can customize it from data-animation-out and data-delay-out. get your animation style from here.
<section class="hero-section overlay bg-cover" data-background="images/banner/banner-1.jpg">
<div class="container">
<div class="hero-slider">
<!-- slider item -->
<div class="hero-slider-item">
<div class="row">
<div class="col-md-8">
<h1 class="text-white" data-animation-out="fadeOutRight" data-delay-out="5" data-duration-in=".3" data-animation-in="fadeInLeft" data-delay-in=".1">Your bright future is our mission</h1>
<p class="text-muted mb-4" data-animation-out="fadeOutRight" data-delay-out="5" data-duration-in=".3" data-animation-in="fadeInLeft" data-delay-in=".4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor
incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exer</p>
<a href="contact.html" class="btn btn-primary" data-animation-out="fadeOutRight" data-delay-out="5" data-duration-in=".3" data-animation-in="fadeInLeft" data-delay-in=".7">Apply now</a>
</div>
</div>
</div>
</div>
</div>
</section>