slick slider

 index.html

<section class="gallery-home">
<h2 class="hide"> &ensp;</h2>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div id="slick-content">
        <div class="slider">
          <div>
            <div class="gal-items">
              <div class="gal-image"><img src="images/edu01.jpg"></div>
              <div class="gal-title">
                <h3>PRIMARY SCHOOL</h3>
              </div>
              <div class="gal-hov-con">
                <h3>PRIMARY SCHOOL</h3>
                <p>Readiness skills are the beginning of Alexandria Country Day School's instructional program for pre-kindergarten and Kindergarten...</p>
                <a class="lrn-more" href="#">learn more</a> </div>
            </div>
          </div>
          <div>
            <div class="gal-items">
              <div class="gal-image"><img src="images/edu02.jpg"></div>
              <div class="gal-title">
                <h3>LOWER SCHOOL</h3>
              </div>
              <div class="gal-hov-con">
                <h3>LOWER SCHOOL</h3>
                <p>Readiness skills are the beginning of Alexandria Country Day School's instructional program for pre-kindergarten and Kindergarten...</p>
                <a class="lrn-more" href="#">learn more</a> </div>
            </div>
          </div>
          <div>
            <div class="gal-items">
              <div class="gal-image"><img src="images/edu03.jpg"></div>
              <div class="gal-title">
                <h3>MIDDLE SCHOOL</h3>
              </div>
              <div class="gal-hov-con">
                <h3>MIDDLE SCHOOL</h3>
                <p>Readiness skills are the beginning of Alexandria Country Day School's instructional program for pre-kindergarten and Kindergarten...</p>
                <a class="lrn-more" href="#">learn more</a> </div>
            </div>
          </div>
          <div>
            <div class="gal-items">
              <div class="gal-image"><img src="images/edu04.jpg"></div>
              <div class="gal-title">
                <h3>Summer Program</h3>
              </div>
              <div class="gal-hov-con">
                <h3>Summer Program</h3>
                <p>Readiness skills are the beginning of Alexandria Country Day School's instructional program for pre-kindergarten and Kindergarten...</p>
                <a class="lrn-more" href="#">learn more</a> </div>
            </div>
          </div>
          <div>
            <div class="gal-items">
              <div class="gal-image"><img src="images/edu01.jpg"></div>
              <div class="gal-title">
                <h3>PRIMARY SCHOOL</h3>
              </div>
              <div class="gal-hov-con">
                <h3>PRIMARY SCHOOL</h3>
                <p>Readiness skills are the beginning of Alexandria Country Day School's instructional program for pre-kindergarten and Kindergarten...</p>
                <a class="lrn-more" href="#">learn more</a> </div>
            </div>
          </div>
          <div>
            <div class="gal-items">
              <div class="gal-image"><img src="images/edu02.jpg"></div>
              <div class="gal-title">
                <h3>LOWER SCHOOL</h3>
              </div>
              <div class="gal-hov-con">
                <h3>LOWER SCHOOL</h3>
                <p>Readiness skills are the beginning of Alexandria Country Day School's instructional program for pre-kindergarten and Kindergarten...</p>
                <a class="lrn-more" href="#">learn more</a> </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </section>
Add.js
  jQuery('.slider').slick({
  centerMode: true,
  centerPadding: '0px',
  slidesToShow: 5,
  slidesToScroll: 1,
  asNavFor: jQuery('.slider'),
  dots: false,
  arrows: false,
  focusOnSelect: true,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 3
      }
    },
    {
      breakpoint: 480,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 1
      }
    }
  ]

});
style.css

.gallery-home {
float: left;
width: 100%;
background-color: #ededed;
min-height: 200px;
padding: 15px 0;
}
.gallery-home li {
float: left;
width: 25%;
}
.gal-items {
width: 100%;
float: left;
position: relative;
}
.gal-image {
float: left;
width: 100%;
position: relative;
}
 .gal-image::before {
 content: "";
 display: block;
 width: 100%;
 height: 100%;
 left: 0;
 right: 0;
 position: absolute;
 background-color: rgba(0, 0, 0, 0.45);
 transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
}
.slick-center .gal-image::before, .gal-image:hover::before {
 background-color: transparent;
}
.gal-title {
position: absolute;
pointer-events: none;
left: 0;
right: 0;
text-align: center;
z-index: 2;
top: 50%;
 transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
opacity: 1;
}
.slick-current .gal-items .gal-title {
opacity: 0;
}
.gal-hov-con {
position: absolute;
pointer-events: none;
z-index: 3;
bottom: 0;
left: 0;
right: 0;
width: 100%;
background-color: #00a4d4;
padding: 15px;
text-align: center;
opacity: 0;
 transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
}
.slick-current .gal-items .gal-hov-con {
opacity: 1;
}
.gal-title h3 {
font-size: 23px;
color: #c1c1c1;
font-weight: 700;
text-transform: uppercase;
}
.gal-hov-con h3 {
color: #fff;
font-size: 23px;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 10px;
}
.gal-hov-con p {
color: #fff;
font-size: 16px;
line-height: 24px;
font-weight: 500;
margin-bottom: 10px;
}
a.lrn-more {
display: block;
color: #002f81;
font-size: 19px;
text-transform: uppercase;
font-weight: 600;
border: 2px solid;
padding: 5px;
width: 170px;
float: none;
margin: 0 auto;
pointer-events: initial;
}
.slick-current .gal-items {
width: 110%;
z-index: 9;
top: -20px;
}
.soc-slider .slick-list {
padding-top: 30px !important;
}