Slick Slider with overlay and text

In this example below you will see how to do a Slick Slider with overlay and text with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by enoklabs, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright enoklabs ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!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(); };

Comments