Check code of Slider 5
Get This slider code
<div class="bg-light">
<section id="slider-sec" class="slider5">
<div id="slider5" class="carousel bs-slider control-round indicators-line" data-ride="carousel" data-pause="hover" data-interval="7000">
<ol class="carousel-indicators">
<li data-target="#slider5" data-slide-to="0" class="active"></li>
<li data-target="#slider5" 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/slider5/slide1.jpg" alt="We are Digital Agency" class="slide-image" />
<div class="bs-slider-overlay"></div>
<!-- Slide Text Layer -->
<div class="slide-text slide_style_left">
<div class="container">
<div class="row">
<div class="col-md-9 col-lg-5 ml-auto">
<h2 data-animation="animated zoomInRight" class="title text-uppercase font-bold m-0 p-b-20">Friut Salad</h2>
<p data-animation="animated lightSpeedIn" class="m-b-40 d-none d-md-block">Not like the brazen giant of Greek fame With conquering limbs astride from land to land Here</p>
<a class="btn btn-outline-danger btn-md btn-rounded btn-arrow" data-animation="animated fadeInRight" data-toggle="collapse" href="#"> <span>Today's Special <i class="ti-arrow-right"></i></span> </a>
<div class="promo-code" data-animation="animated fadeInUp">
<h3 class="title font-semibold text-uppercase m-b-0">Hot Summer - 35 % OFF</h3>
<p>Apply promocode '154FEB'
<p>
</div>
</div>
<div class="col-lg-1 hidden-md-down"></div>
</div>
</div>
</div>
</div>
<!-- End of Slide -->
<!-- Second Slide -->
<div class="carousel-item">
<!-- Slide Background --><img src="../assets/images/sliders/slider5/slide2.jpg" alt="Building Magical Apps" class="slide-image" />
<div class="bs-slider-overlay"></div>
<!-- Slide Text Layer -->
<div class="slide-text">
<div class="container">
<div class="row">
<div class="col-md-9 col-lg-5 ml-auto">
<h2 data-animation="animated flipInX" class="title text-uppercase font-bold m-0 p-b-20">Enjoy Delicious Food Now</h2>
<p data-animation="animated lightSpeedIn" class="m-b-40 d-none d-md-block">Not like the brazen giant of Greek fame With conquering limbs astride from land to land Here </p>
<a class="btn btn-danger btn-md btn-rounded btn-arrow" data-animation="animated fadeInRight" data-toggle="collapse" href="#"> <span>Today's Special <i class="ti-arrow-right"></i></span> </a>
<div class="promo-code" data-animation="animated fadeInUp">
<h3 class="title font-semibold text-uppercase m-b-0">Hot Summer - 35 % OFF</h3>
<p>Apply promocode '154FEB'
<p>
</div>
</div>
<div class="col-lg-1 hidden-md-down"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
@keyframes imageScaleOut {
0% {
transform: scale(1.3);
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
}
100% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
-moz-transform: scale(1.0);
-o-transform: scale(1.0);
}
}
@keyframes fadeIn {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
.slider5 {
.bs-slider-overlay {
display: none;
background-color: rgba(247, 247, 247, 0.7);
}
.slide-image {
animation: imageScaleOut 15s ease-in-out infinite alternate, fadeIn 0.5s ease-in-out alternate;
-webkit-animation: imageScaleOut 15s ease-in-out infinite alternate, fadeIn 0.5s ease-in-out alternate;
-moz-animation: imageScaleOut 15s ease-in-out infinite alternate, fadeIn 0.5s ease-in-out alternate;
-o-webkit-animation: imageScaleOut 15s ease-in-out infinite alternate, fadeIn 0.5s ease-in-out alternate;
}
h2 {
font-size: 46px;
line-height: 46px;
}
h3 {
font-size: 21px;
}
.carousel-indicators {
bottom: 0;
li {
background-color: rgba(0, 0, 0, 0.15);
&.active {
background-color: $themecolor;
}
}
}
.promo-code {
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
margin-top: 40px;
background: url(../../../assets/images/sliders/slider5/slide-offer-bg.jpg) no-repeat center top;
background-size: cover;
padding: 30px 50px;
box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.10);
}
}
@media (max-width: 1280px) {
.slider5 {
overflow-y: hidden;
.slide-image {
height: 550px;
width: auto !important;
}
}
}
@media (max-width: 1100px) {
.slider5 {
text-shadow: 1px 1px 0 $white;
.slide-image {
position: relative;
}
h2 {
font-size: 40px;
}
.promo-code {
padding: 30px;
}
}
}
@media (max-width: 991px) {
.slider5 {
h2 {
font-size: 44px;
}
.promo-code {
padding: 30px 50px;
}
.slide-image {
left: -30%;
}
}
}
@media (max-width: 767px) {
.slider5 {
.slide-image {
left: -10%;
}
.slide-text {
padding: 0 !important;
width: 95% !important;
}
.slide-image {
height: 380px;
}
.bs-slider-overlay {
display: block;
}
p {
color: $bodytext;
}
.promo-code {
padding: 10px 50px;
}
}
}
@media (max-width: 428px) {
.slider5 {
h2 {
font-size: 33px;
line-height: 34px;
}
.slide-image {
left: -50%;
}
.promo-code {
padding: 10px 20px;
}
}
}
@media (max-width: 320px) {
.slider5 {
h2 {
font-size: 28px;
line-height: 30px;
}
h3 {
font-size: 18px;
}
}
}
$('#slider5').bsTouchSlider();
$(".carousel .carousel-inner").swipe({
swipeLeft: function (event, direction, distance, duration, fingerCount) {
this.parent().carousel('next');
}
, swipeRight: function () {
this.parent().carousel('prev');
}
, threshold: 0
});