CodePen Embed - Slick-slider

<div class="container">
  <div class="slider center">
    <div class="clip">
      <section>
        <figure class="new-arrivals ">
          <img class="" src="http://i.piccy.info/i9/57577700a9af30733f09462bf97a761d/1485778507/54789/1113648/8784_256x256x32_1_.png" title="image" alt="image">
          <figcaption class="text-area">
            <h4 class="heading">Cat</h4>
            <h3 class="name">Description</h3>
            <p class="rate-star">
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star-o" aria-hidden="true"></i>
              <a class="review" href="#">1 Review</a>
            </p>
            <p class="price"><span>WANTED</span></p>
          </figcaption>
        </figure>
      </section>
    </div>
    <div class="clip">
      <section>
        <figure class="new-arrivals">
          <img class="img-responsive" src="http://s1.iconbird.com/ico/2013/8/428/w256h2561377930213catbox.png" title="image" alt="image">
          <figcaption class="text-area">
            <h4 class="heading">Cat</h4>
            <h3 class="name">Description</h3>
            <p class="rate-star">
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star-o" aria-hidden="true"></i>
              <a class="review" href="#">1 Review</a>
            <p class="price"><span>WANTED</span></p>
          </figcaption>
        </figure>
      </section>
    </div>
    <div class="clip">
      <section>
        <figure class="new-arrivals ">
          <img class="" src="http://s1.iconbird.com/ico/2013/8/428/w256h2561377930238catfish.png" title="image" alt="image">
          <figcaption class="text-area">
            <h4 class="heading">Cat</h4>
            <h3 class="name">Description</h3>
            <p class="rate-star">
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star-o" aria-hidden="true"></i>
              <a class="review" href="#">1 Review</a>
            </p>
            <p class="price"><span>WANTED</span></p>
          </figcaption>
        </figure>
      </section>
    </div>
    <div class="clip">
      <section>
        <figure class="new-arrivals">
          <img class="" src="http://s1.iconbird.com/ico/2013/8/428/w256h2561377930231cateyes.png" title="image" alt="image">
          <figcaption class="text-area">
            <h4 class="heading">Cat</h4>
            <h3 class="name">Description</h3>
            <p class="rate-star">
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star-o" aria-hidden="true"></i>
              <a class="review" href="#">1 Review</a>
            </p>
            <p class="price"><span>WANTED</span></p>
          </figcaption>

        </figure>
      </section>
    </div>
    <div class="clip">
      <section>
        <figure class="new-arrivals">
          <img class="" src="http://s1.iconbird.com/ico/2013/9/430/w256h2561378622493catupsidedown2.png" title="image" alt="image">
          <figcaption class="text-area">
            <h4 class="heading">Cat</h4>
            <h3 class="name">Description</h3>
            <p class="rate-star">
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star-o" aria-hidden="true"></i>
              <a class="review" href="#">1 Review</a>
            </p>
            <p class="price"><span>WANTED</span></p>
          </figcaption>
        </figure>
      </section>
    </div>
  </div>
</div>

body{
  background: #d2c6a5;
}
.container {
  margin: 40px auto;
  max-width: 800px;
  width: 100%;
  height: 600px;
}

.clip>section {
  background: #fff;
  height: auto;
  margin: 10px;
  padding: 2%;
  position: relative;
  text-align: center;
  border: 1px solid #e7e7e7;
}

section .top img{
  margin: 0 auto;
}
section .bottom {
  font-size: 70%;
  width: 70%;
  margin: 0 auto;
  background-color: rgba(255, 0, 0, 0.3);
}

.clip {
  overflow: hidden;
  bottom: 0;
}

.center .slick-slide {
  height: auto;
}

.center .slick-center section {
  color: #e67e22;
  opacity: 1;
  transform: scale(1.08);
}

.center section {
  opacity: 0.25;
  bottom: 0;
  background: #a74646;
}
.new-arrivals .heading {
    text-align: center;
    font-family: 'Bungee', cursive;
    color: #eaeaea;
    font-size: 22px;
    text-shadow: 3px 3px 3px #222;
    margin: 0;
}

.new-arrivals .name {
    color: #333;
    font-size: 16px;
    font-family: cursive;
    margin: 0;
    font-weight: bold;
}

 .new-arrivals .text-area .rate-star {
  margin:5px;
}
.new-arrivals .text-area .rate-star i {
    color: #daa918;
    font-size: 12px;
    text-align: left;
    border: 2px solid #daa918;
    padding: 2px;
    border-radius: 50%;
}

 .new-arrivals .text-area .rate-star span {
  font-size: 14px;
}

.new-arrivals .text-area .rate-star .review {
    color: #e5e7ea;
    text-transform: none;
    font-size: 15px;
    padding-left: 5px;
    text-decoration: none;
    display: block;
    padding-top: 5px;
    font-weight: bold;
    font-family: cursive;
}

.price span {
    display: block;
    max-width: 100px;
    width: 100%;
    margin: 0 auto;
    box-shadow: 2px 2px 2px #222;
    padding: 5px 3px;
    transform: rotate(-5deg);
    background: #d2c6a5;
    color: #333;
    font-family: cursive;
    font-weight: bold;
}

a:focus,
a:hover {
  text-decoration: none;
}
.slick-slide img {
    display: block;
    width: 100%;
  height: auto;
}
/*.slick-prev:before {
    content: '\f257' !important;
    font-family: 'FontAwesome';
    font-size: 40px;
    transform: rotate(40deg);
    display: block;
    line-height: 1;
    opacity: 1;
    color: white;
}
 .slick-next:before {
    content: '\f257' !important;
    font-family: 'FontAwesome';
    font-size: 40px;
    transform: rotate(140deg);
    display: block;
    line-height: 1;
    opacity: 1;
    color: white;
}*/

$('.center').slick({
  centerMode: true,
  infinite: true,
  centerPadding: '60px',
  slidesToShow: 3,
  speed: 800,
  variableWidth: false,
});

This Pen is owned by Pushaka on CodePen.

See more by @Pushaka on CodePen

External CSS

External JavaScript