Check code of Slider 9
Get This slider code
<div class="bg-light">
<section id="slider-sec" class="slider9">
<div id="slider9" 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="#slider9" data-slide-to="0" class="active"></li>
<li data-target="#slider9" data-slide-to="1"></li>
</ol>
<!-- Wrapper For Slides -->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="row bg-info">
<div class="col-md-7 d-block d-md-none">
<!-- Slide Background --><img src="../assets/images/sliders/slider9/slide1.jpg" alt="We are Digital Agency" class="slide-image" /> </div>
<div class="col-md-5">
<!-- Slide Text Layer -->
<div class="slide-text slide_style_left">
<div class="container">
<div class="row">
<div class="col-md-11 col-lg-9 ml-auto">
<h2 data-animation="animated fadeInLeft" class="title text-white font-bold m-0 p-b-40">Dont Worry for your Accounting, Leave that to us.</h2>
<p class="p-0 m-b-40 hidden-md-down" data-animation="animated fadeInUp">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 text-white btn-md btn-arrow" data-animation="animated fadeInLeft" data-toggle="collapse" href="#"> <span>Ask for Questions <i class="ti-arrow-right"></i></span> </a>
<p class="font-14 p-t-30 m-0">Do you have any Query? <a href="#" class="text-white">Contact Us</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-7 d-none d-none d-md-block">
<!-- Slide Background --><img src="../assets/images/sliders/slider9/slide1.jpg" alt="We are Digital Agency" class="slide-image" /> </div>
</div>
</div>
<!-- End of Slide -->
<div class="carousel-item">
<div class="row bg-info">
<div class="col-md-7 d-block d-md-none">
<!-- Slide Background --><img src="../assets/images/sliders/slider9/slide2.jpg" alt="We are Digital Agency" class="slide-image" /> </div>
<div class="col-md-5">
<!-- Slide Text Layer -->
<div class="slide-text slide_style_left">
<div class="container">
<div class="row">
<div class="col-md-11 col-lg-9 ml-auto">
<h2 data-animation="animated fadeInLeft" class="title text-white font-bold m-0 p-b-40">Accounting Made Easy, Fast & Reliable with WrapKit Project</h2>
<p class="p-0 m-b-40 hidden-md-down" data-animation="animated fadeInUp">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 text-white btn-md btn-arrow" data-animation="animated fadeInLeft" data-toggle="collapse" href="#"> <span>Ask for Question <i class="ti-arrow-right"></i></span> </a>
<p class="font-14 p-t-30 m-0">Do you have any Query? <a href="#" class="text-white">Contact Us</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-7 d-none d-md-block">
<!-- Slide Background --><img src="../assets/images/sliders/slider9/slide2.jpg" alt="We are Digital Agency" class="slide-image" /> </div>
</div>
</div>
<!-- Second Slide -->
<!-- End of Slide -->
<!-- End of Wrapper For Slides -->
</div>
</div>
<!-- End Slider -->
</section>
</div>
.slider9 {
p {
color:#b8d0ff;
a {
text-decoration:underline;
&:hover {
text-decoration:none;
}
}
}
.carousel-indicators {
right:auto;
margin-left:11%;
margin-right:11%;
}
.btn {
border:1px solid #fff;
}
.col-lg-9 {
max-width:400px;
}
}
@media (max-width: 1100px) {
.slider9 {
.col-md-11 {
min-width:355px;
}
p {
font-size:14px;
}
.carousel-indicators {
right:0;
}
}
}
@media (max-width: 992px) {
.slider9 {
.col-md-11 {
min-width:250px;
}
h2 {
font-size:22px;
line-height:30px;
}
}
}
@media (max-width: 767px) {
.slider9 {
.bs-slider, .carousel-item {
max-height:100% !important;
}
.slide-text {
position:relative;
}
.col-md-11 {
padding:25px 15px 50px;
}
.col-lg-9 {
max-width:100%;
}
.carousel-indicators {
bottom:-5px;
}
}
}
@media (max-width: 320px) {
.slider9 {
h2 {
font-size:17px;
line-height:26px;
}
}
}
@media (min-width: 1900px) and (max-width: 2700px) {
.slider9 {
.carousel-indicators {
margin-left:20%;
}
}
}
@media (min-width: 1970px) and (max-width: 2700px) {
.slider9 {
.slide-text {
transform:translate(-50%, -100%) !important;
-webkit-transform:translate(-50%, -100%) !important;
-moz-transform:translate(-50%, -100%) !important;
}
.carousel-indicators {
margin-left:26%;
}
}
}
$('#slider9').bsTouchSlider();
$(".carousel .carousel-inner").swipe({
swipeLeft: function (event, direction, distance, duration, fingerCount) {
this.parent().carousel('next');
}
, swipeRight: function () {
this.parent().carousel('prev');
}
, threshold: 0
});