Check code of Slider 6
Get This slider code
<div class="bg-light">
<section id="slider-sec" class="slider6">
<div id="slider6" class="carousel bs-slider slide control-round indicators-line" data-ride="carousel" data-pause="hover" data-interval="7000">
<ol class="carousel-indicators hide">
<li data-target="#slider6" data-slide-to="0" class="active"></li>
<li data-target="#slider6" 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/slider6/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-8 col-lg-5" data-animation="animated slideInUp">
<div class="bg-danger-gradiant slide-content po-relative">
<h2 data-animation="animated fadeInLeft" class="title text-white">Yoga makes it easy for body to be Fit</h2>
<p data-animation="animated fadeInLeft" class="m-b-40 text-white op-7">Join Our Programm and Be Fit and Live nice & Joyful Life to everyday.</p>
<a class="btn btn-md btn-arrow" data-animation="animated fadeInLeft" data-toggle="collapse" href="#"> <span>Join The Force Now! <i class="ti-arrow-right"></i></span> </a>
<div class="bg-white price-tag text-center">
<label class="text-inverse font-semibold">Yoga Classes</label> <span class="text-danger">$49<b class="font-normal font-14"> /M</b></span> </div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End of Slide -->
<!-- Second Slide -->
<div class="carousel-item">
<!-- Slide Background --><img src="../assets/images/sliders/slider6/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-8 col-lg-5 ml-auto">
<div class="bg-danger-gradiant slide-content" data-animation="animated slideInUp">
<h2 data-animation="animated fadeInRight" class="title text-white">Body Building with Fitness Program</h2>
<p data-animation="animated fadeInRight" class="m-b-40 text-white op-7">Join Our Programm and Be Fit and Live nice & Joyful Life to everyday.</p>
<a class="btn btn-md btn-arrow" data-animation="animated fadeInRight" data-toggle="collapse" href="#"> <span>Join The Force Now! <i class="ti-arrow-right"></i></span> </a>
<div class="bg-white price-tag text-center">
<label class="text-inverse font-semibold">Yoga Classes</label> <span class="text-danger">$49<b class="font-normal font-14">/M</b></span> </div>
</div>
</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-danger font-14" href="#slider6" role="button" data-slide="prev"> <span class="bg-white text-center 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-danger font-14" href="#slider6" role="button" data-slide="next"> <span class="bg-white text-center 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>
.slider6 {
.slide-text {
bottom:0;
top:auto !important;
transform:translate(-50%, 0) !important;;
-webkit-transform:translate(-50%, 0) !important;;
-moz-transform:translate(-50%, 0) !important;;
}
.slider-control span {
width:53px;
height:53px;
line-height:53px;
border-radius:50%;
}
h2 {
line-height:42px;
font-size:36px;
}
.btn-md {
border:1px solid $white;
}
.slide-content {
padding:40px;
position:relative;
opacity:0.9;
}
.price-tag {
position:absolute;
right:-65px;
top:-65px;
width:130px;
height:130px;
padding-top:37px;
border-radius:50%;
span {
font-weight:300;
font-size:36px;
line-height:36px;
}
}
}
@media (max-width:767px) {
.slider6 {
.slider-control span {
width:34px;
height:34px;
line-height:34px;
}
h2 {
font-size:28px;
line-height:36px;
}
.slide-text {
padding:0 !important;
width:80% !important;
}
.slide-image {
height:430px;
}
.slide-content {
padding:30px;
}
}
}
@media (max-width: 590px) {
.slider6 {
.price-tag {
right:0;
top:-80px;
left:0;
margin:auto;
padding-top:20px;
width:100px;
height:100px;
span {
font-size:30px;
}
label {
font-size:12px;
}
}
}
}
@media (max-width: 428px) {
.slider6 {
.slider-control span {
width:26px;
height:26px;
line-height:26px;
font-size:12px !important;
}
.slide-content {
padding:30px 20px;
}
.slide-image {
left:-90%;
}
h2 {
font-size:22px;
line-height:30px;
}
.btn-md {
padding-left:25px;
padding-right:25px;
}
}
}
@media (max-width: 320px) {
.slider6 {
.slide-content {
padding:30px 15px;
}
h2 {
font-size:20px;
}
.btn-md {
padding-left:20px;
padding-right:20px;
}
.slide-image {
height:390px;
}
}
}
$('#slider6').bsTouchSlider();
$(".carousel .carousel-inner").swipe({
swipeLeft: function (event, direction, distance, duration, fingerCount) {
this.parent().carousel('next');
}
, swipeRight: function () {
this.parent().carousel('prev');
}
, threshold: 0
});