"Untitled"
Bootstrap 4.1.1 Snippet by Shivamsemisetia

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- Slick Slider-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" />
<section class="banner__slider">
<div class="slider">
<div class="slide">
<div class="slide__img">
<img src="" alt="" data-lazy="https://images.unsplash.com/photo-1484402628941-0bb40fc029e7?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=600&h=338&fit=crop&s=6237e62a10fa079d99b088b0db0144ac" class="full-image animated" data-animation-in="zoomInImage"/>
</div>
<div class="slide__content ">
<div class="slide__content--headings text-center">
p class="animated top-title" data-animation-in="fadeInUp" data-delay-in="0.3">Welcome to Shareat restaurant</p>
<h2 class="animated title" data-animation-in="fadeInUp">Let Enjoy The Rhym Of Fooday Dishes</h2>
<button class="btn-light btn button-custom animated" data-animation-in="fadeInUp">Our menu</button>
</div>
</div>
</div>
<div class="slide">
<div class="slide__img">
<img src="" alt="" data-lazy="https://images.unsplash.com/photo-1484402628941-0bb40fc029e7?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=600&h=338&fit=crop&s=6237e62a10fa079d99b088b0db0144ac" class="full-image animated" data-animation-in="zoomInImage"/>
</div>
<div class="slide__content">
<div class="slide__content--headings text-right">
<img src="images/Color+logo.png" alt="" class="img-fluid animated" data-animation-in="fadeInUp" data-delay-in="0.2">
<!--p class="animated top-title" data-animation-in="fadeInLeft" data-delay-in="0.2">Wish you have good food at our restaurant</p>
<h2 class="animated title" data-animation-in="fadeInLeft">Experience the food</h2>
<button class="btn-success btn button-custom animated text-white" data-animation-in="fadeInUp">Order Now</button-->
</div>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.slide {
position: relative;
transition: 1s;
}
.slide .slide__img {
width: 100%;
height: auto;
overflow: hidden;
}
.slide .slide__img img {
max-width: 100%;
height: auto;
opacity: 1 !important;
-webkit-animation-duration: 3s;
animation-duration: 3s;
transition: all 1s ease;
width:100%;
}
.slide .slide__content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index:2;
}
.slide .slide__content.slide__content__left {
left: 15%;
transform: translate(-15%, -50%);
}
.slide .slide__content.slide__content__right {
right: 15%;
left: auto;
transform: translate(5%, -50%);
}
.slide .slide__content--headings {
color: #FFF;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
$('.slider').slick({
autoplay: true,
speed: 800,
lazyLoad: 'progressive',
arrows:false,
dots: true,
fade: true,
speed: 3000,
infinite: true,
autoplaySpeed: 3000,
pauseOnHover:false,
}).slickAnimation();
$('.slick-nav').on('click touch', function(e) {
e.preventDefault();
var arrow = $(this);
if(!arrow.hasClass('animate')) {
arrow.addClass('animate');
setTimeout(() => {
arrow.removeClass('animate');
}, 1600);
}
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Paper Dashboard 2 PRO

Questions / Comments: