<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Slick Slider with overlay and text</title>
<link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="slider">
<div class="slide">
<img src="http://placehold.it/1200x400&text=Slide 1">
<div class="overlay dark"></div>
<div class="content">
<h2>Title 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<div class="cta">
<a href="#" class="btn">
button
</a>
</div>
</div>
</div>
<div class="slide">
<img src="http://placehold.it/1200x400&text=Slide 2">
<div class="overlay light"></div>
<div class="content">
<h2>Title 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus dolorum reiciendis ducique?</p>
<div class="cta">
<a href="#" class="btn">
button
</a>
</div>
</div>
</div>
</div>
<div class="bookingsearch-holder">
Booker
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/enoklabs/slick-slider-with-overlay-and-text-bqQpBV */
.container {
position: relative;
width: 100%;
}
.slide {
width: 100%;
display: block;
}
img {
position: relative;
width: 100%;
}
.overlay {
position: fixed;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
}
.content {
position: absolute;
top: 200px;
width: 100%;
text-align: center;
}
.content p {
width: 200px;
margin: 20px auto;
}
.content .cta {
float: left;
width: 100%;
text-align: center;
}
.content .cta .btn {
padding: 10px 20px;
background: #fff;
}
.bookingsearch-holder {
width: 280px;
height: 350px;
background: black;
color: white;
position: absolute;
top: 50px;
left: 20px;
z-index: 5;
}
/*Downloaded from https://www.codeseek.co/enoklabs/slick-slider-with-overlay-and-text-bqQpBV */
$('.slider').slick({
dots: true,
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear'
});
var prevSlideInterval = null,
nextSlideInterval = null;
function prevSlideAnimation() { $('.slick-codepen').slickPrev(); };
function nextSlideAnimation() { $('.slick-codepen').slickNext(); };
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
jQuery
v2.1.3
