Check code of Slider 2
Get This slider code
<div class="bg-light">
<section id="slider-sec" class="slider2">
<div id="slider2" class="carousel bs-slider slide control-round indicators-line" data-ride="carousel" data-pause="hover" data-interval="7000">
<!-- Wrapper For Slides -->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<!-- Slide Background --><img src="../assets/images/sliders/slider2/slide1.jpg" alt="We are Digital Agency" class="slide-image" />
<!-- Slide Text Layer -->
<div class="slide-text slide_style_left">
<div class="col-md-9 col-lg-6">
<label class="label label-warning text-uppercase font-semibold" data-animation="animated fadeInDown">Welcome To</label>
<h2 data-animation="animated zoomInRight" class="title text-white">Machinery and Hardware Company, which makes Quality Products</h2> </div>
<div class="col-md-8 col-lg-5">
<p data-animation="animated fadeInLeft" class="m-t-40 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>
</div>
<div class="col-sm-12 btn-pad">
<a class="btn btn-info-gradiant btn-md btn-arrow" data-animation="animated fadeInLeft" data-toggle="collapse" href="#"> <span>Ask for Question <i class="ti-arrow-right"></i></span> </a> <a class="btn text-white" data-animation="animated fadeInRight" data-toggle="modal" data-target="#video" href="#"><i class="icon-Play-Music text-white vm m-r-10"></i> Watch Video</a> </div>
</div>
</div>
<!-- End of Slide -->
<!-- Second Slide -->
<div class="carousel-item">
<!-- Slide Background --><img src="../assets/images/sliders/slider2/slide2.jpg" alt="Building Magical Apps" class="slide-image" />
<!-- Slide Text Layer -->
<div class="slide-text">
<div class="col-md-9 col-lg-6">
<h2 data-animation="animated flipInX" class="title text-white">Machinery and Hardware Company, which makes Quality Products</h2> </div>
<div class="col-md-8 col-lg-5">
<p data-animation="animated lightSpeedIn" class="m-t-40 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>
</div>
<div class="col-sm-12 btn-pad">
<a class="btn btn-info-gradiant btn-md btn-arrow" data-animation="animated fadeInUp" data-toggle="collapse" href="#"> <span>Ask for Question <i class="ti-arrow-right"></i></span> </a>
</div>
</div>
</div>
<!-- End of Slide -->
<!-- Third Slide -->
<div class="carousel-item">
<!-- Slide Background -->
<video width="100%" autoplay loop>
<source src="../assets/videos/welding.mp4" type="video/mp4"> Your browser does not support HTML5 video. </video>
<div class="bs-slider-overlay"></div>
<!-- Slide Text Layer -->
<div class="slide-text">
<div class="col-md-9 col-lg-6">
<h2 data-animation="animated flipInX" class="title text-white">Machinery and Hardware Company.</h2> </div>
<div class="col-md-8 col-lg-5">
<p data-animation="animated lightSpeedIn" class="m-t-40 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>
</div>
<div class="col-sm-12 btn-pad">
<a class="btn btn-info-gradiant btn-md btn-arrow" data-animation="animated fadeInUp" data-toggle="collapse" href="#"> <span>Ask for Question <i class="ti-arrow-right"></i></span> </a>
</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="#slider2" 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="#slider2" 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 -->
<!-- Slider Modal -->
<div class="modal bd-example-modal-lg fade" id="video" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalTitle">Your Video Title Here</h5>
<button type="button" class="close font-20" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true" class="ti-close"></span> </button>
</div>
<div class="modal-body">
<video width="100%" controls>
<source src="../assets/videos/welding.mp4" type="video/mp4"> Your browser does not support HTML5 video. </video>
</div>
</div>
</div>
</div>
<!-- End Slider Modal -->
</section>
</div>
.slider2 {
.bs-slider, .carousel-item{
max-height: 900px;
}
.bs-slider-overlay {
background:rgba(32, 35, 43, 0.8);
}
.slider-control span {
width:53px;
height:53px;
line-height:53px;
text-align:center;
border-radius:50%;
border:1px solid #fff;
}
label {
line-height:27px;
border-radius:0;
color:#1a1a1a;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
h2 {
line-height:42px;
font-size:36px;
}
p {
line-height:24px;
font-weight:400;
}
i.icon-Play-Music {
font-size:32px;
}
}
@media (max-width: 1280px) {
.slider2, .slider3 {
overflow-y:hidden;
.slide-image {
height:550px;
width:auto !important;
}
.slider-control span {
width:44px;
height:44px;
line-height:44px;
}
}
}
@media (max-width: 1100px) {
.slider2, .slider3 {
h2 {
font-size:34px;
}
.slide-image {
left:-20%;
position:relative;
}
.slide-text {
width:80% !important;
}
}
}
@media (max-width:992px) {
.slider2 {
video {
width:120%;
}
}
}
@media (max-width:767px) {
.slider2, .slider3 {
.slider-control span {
width:34px;
height:34px;
line-height:34px;
}
.slide-text {
padding:0 !important;
width:80% !important;
}
h2 {
font-size:28px;
line-height:36px;
margin-bottom:30px;
}
.slide-image {
left:0;
height:300px;
}
.btn {
padding-left:15px;
padding-right:15px;
&.btn-md {
padding-left:25px;
padding-right:25px;
}
}
.btn-pad {
padding-right:0;
}
}
}
@media (max-width: 428px) {
.slider2, .slider3 {
.slider-control span {
width:26px;
height:26px;
line-height:26px;
font-size:12px !important;
}
h2 {
font-size:22px;
line-height:30px;
margin-bottom:20px;
}
i.icon-Play-Music {
font-size:26px;
}
a.btn-md {
text-align:center;
margin-bottom:10px;
}
.slide-image {
left:-75%;
height:380px;
}
.btn {
padding-left:0;
}
video {
width:160%;
}
}
}
$('#slider2').bsTouchSlider();
$(".carousel .carousel-inner").swipe({
swipeLeft: function (event, direction, distance, duration, fingerCount) {
this.parent().carousel('next');
}
, swipeRight: function () {
this.parent().carousel('prev');
}
, threshold: 0
});