<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>
<div class="slide">
<div class="slide__img">
<img src="" alt="" data-lazy="images/IRELAND.jpg" class="full-image animated" data-animation-in="zoomInImage"/>
</div>
<div class="slide__content">
<div class="slide__content--headings text-left">
<img src="images/Color+logo.png" alt="" class="img-fluid animated" data-animation-in="fadeInUp" data-delay-in="0.2">
</div>
</div>
</div>
<div class="slide">
<div class="slide__img">
<img src="" alt="" data-lazy="images/f2.jpg" class="full-image animated" data-animation-in="zoomInImage"/>
</div>
<div class="slide__content">
<div class="slide__content--headings text-left">
<img src="images/Color+logo.png" alt="" class="img-fluid animated" data-animation-in="fadeInUp" data-delay-in="0.2">
</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-left">
<img src="images/Color+logo.png" alt="" class="img-fluid animated" data-animation-in="fadeInUp" data-delay-in="0.2">
</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-left">
<img src="images/Color+logo.png" alt="" class="img-fluid animated" data-animation-in="fadeInUp" data-delay-in="0.2">
</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-left">
<img src="images/Color+logo.png" alt="" class="img-fluid animated" data-animation-in="fadeInUp" data-delay-in="0.2">
</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-left">
<img src="images/Color+logo.png" alt="" class="img-fluid animated" data-animation-in="fadeInUp" data-delay-in="0.2">
</div>
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script src="https://alexandrebuffet.fr/codepen/slider/slick-animation.min.js"></script>
.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;
}
.slide .slide__content--headings h2 {
font-size: 4.5rem;
margin: 10px 0;
}
.slide .slide__content--headings .animated {
transition: all 0.5s ease;
}
.slide .slide__content--headings .top-title {
font-family: "Playball", cursive;
font-size: 2.5rem;
}
.slide .slide__content--headings .title {
font-size: 3.5rem;
}
.slide .slide__content--headings .button-custom {
text-decoration: none;
color: #333;
padding: 1.2rem 2.5rem;
font-size: 1.5rem;
}
.slider [data-animation-in] {
opacity: 0;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
transition: opacity 0.5s ease 0.3s;
transition: 1s;
}
.slick-dotted .slick-slider {
margin-bottom: 30px;
}
@media (min-width: 992px) {
.slide .slide__img {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
right:0;
}
}
@media (min-width: 992px) {
.slider, .slide {
height: 100vh;
}
}
$('.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);
}
});
