Check code of Slider 4
Get This slider code
<div class="bg-light">
<section id="slider-sec" class="slider4">
<div id="slider4" class="carousel bs-slider slide control-round indicators-line" data-ride="carousel" data-pause="hover" data-interval="7000">
<ol class="carousel-indicators">
<li data-target="#slider4" data-slide-to="0" class="active"></li>
<li data-target="#slider4" data-slide-to="1"></li>
</ol>
<!-- Wrapper For Slides -->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<!-- Slide Background --><img src="../assets/images/sliders/slider4/slide1.jpg" alt="We are Digital Agency" class="slide-image" />
<!-- Slide Text Layer -->
<div class="slide-text slide_style_left">
<div class="container">
<div class="row">
<div class="col-md-9 col-lg-6">
<label class="font-20" data-animation="animated fadeInDown">Best Accounting Services</label>
<h2 data-animation="animated fadeInLeft" class="title font-bold m-0 p-b-40">Accounting Made Easier, Faster & Managable</h2>
<ul class="p-0 m-b-40 hidden-sm-down" data-animation="animated fadeInUp">
<li><i class="sl-icon-check text-primary m-r-15"></i> Powerful and Faster Results for your site</li>
<li><i class="sl-icon-check text-primary m-r-15"></i> Make your site in no-time with your Bootstrap WrapKit</li>
<li><i class="sl-icon-check text-primary m-r-15"></i> Tons of Features and Elements available here</li>
</ul>
<a class="btn btn-info-gradiant btn-md btn-arrow" data-animation="animated fadeInLeft" data-toggle="collapse" href="#"> <span>Check Our Services <i class="ti-arrow-right"></i></span> </a>
<a class="btn btn-secondary btn-md btn-arrow m-l-20" data-animation="animated fadeInRight" data-toggle="collapse" href="#"> <span>Ask for Quatation <i class="ti-arrow-right"></i></span> </a>
</div>
</div>
</div>
</div>
</div>
<!-- End of Slide -->
<!-- Second Slide -->
<div class="carousel-item">
<!-- Slide Background --><img src="../assets/images/sliders/slider4/slide2.jpg" alt="Building Magical Apps" class="slide-image" />
<!-- Slide Text Layer -->
<div class="slide-text">
<div class="container">
<div class="row">
<div class="col-md-9 col-lg-6">
<label class="font-20" data-animation="animated fadeInDown">Best Accounting Services</label>
<h2 data-animation="animated flipInX" class="title font-bold m-0 p-b-30">Get Free from Accounting related Headaches</h2>
<p data-animation="animated fadeInLeft" class="m-b-40 hidden-sm-down">We offer services in various jonar of Accounting.Let us take your all worry regarding your daily accounting and take rest.</p>
<a class="btn btn-info-gradiant btn-md btn-arrow" data-animation="animated fadeInUp" data-toggle="collapse" href="#"> <span>Check Our Services <i class="ti-arrow-right"></i></span> </a>
</div>
</div>
</div>
</div>
</div>
<!-- End of Slide -->
<!-- End of Wrapper For Slides -->
<!-- Slider Control -->
<div class="slider-control">
<!-- Left Control -->
<a class="left carousel-control-prev text-white font-14" href="#slider4" role="button" data-slide="prev"> <span class="ti-arrow-left" aria-hidden="true"></span> <b class="sr-only font-normal">Previous</b> </a>
<!-- Right Control -->
<a class="right carousel-control-next text-white font-14" href="#slider4" role="button" data-slide="next"> <span class="ti-arrow-right" aria-hidden="true"></span> <b class="sr-only font-normal">Next</b> </a>
</div>
<!-- End of Slider Control -->
</div>
</div>
<!-- End Slider -->
</section>
</div>
@keyframes imagescale {
0% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
-moz-transform: scale(1.0);
-o-transform: scale(1.0);
}
100% {
transform: scale(1.3);
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
}
}
.slider4 {
.slide-image {
animation: imagescale 15s ease-in-out infinite alternate;
-webkit-animation: imagescale 15s ease-in-out infinite alternate;
-moz-animation: imagescale 15s ease-in-out infinite alternate;
-o-webkit-animation: imagescale 15s ease-in-out infinite alternate;
}
.carousel-indicators {
bottom:0;
li {
background-color:$white;
&.active{
background-color:$themecolor;
}
}
}
label {
font-style:italic;
font-family:'PlayFairDisplay', sans-sarif;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
ul {
list-style:none;
margin:0;
-webkit-animation-delay: 1.1s;
animation-delay: 1.1s;
li{
line-height:36px;
}
}
h2 {
font-size:36px;
line-height:42px;
font-size:36px;
}
p {
font-size:18px;
}
.slider-control span {
width:53px;
height:53px;
line-height:53px;
text-align:center;
border-radius:50%;
border:1px solid $dark;
color: $dark;
}
.btn-secondary {
background:transparent;
color:$dark;
&:hover {
color:$dark !important;
}
}
}
@media (max-width: 768px) {
.slider4 {
h2 {
font-size:28px;
line-height:36px;
}
.slide-text {
padding:0 !important;
width:95% !important;
}
.slide-image {
height:480px;
width: auto !important;
position:relative;
}
.btn-md {
padding-left:25px;
padding-right:25px;
}
}
}
@media (max-width: 428px) {
.slider4 {
h2 {
font-size:23px;
line-height:30px;
}
.slide-image {
left:-90%;
height:380px;
}
.btn-md {
text-align:center;
margin-bottom:10px;
}
.btn-secondary {
margin-left:0 !important;
}
}
}
$('#slider4').bsTouchSlider();
$(".carousel .carousel-inner").swipe({
swipeLeft: function (event, direction, distance, duration, fingerCount) {
this.parent().carousel('next');
}
, swipeRight: function () {
this.parent().carousel('prev');
}
, threshold: 0
});