How can I create this effect on a slider?

I've been able to create a 4 images slider by using jQuery Slick. This is my code:

$(function(){
    $('.slider').slick({
        infinite: false,
        speed: 500,
        slidesToShow: 4,
        slidesToScroll: 4
    });
});

/* Default CSS for Slick library */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;

  .product-item-info-slick {
    display: inline-block;
    width: 24%;
  }
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;

  &:focus {
    outline: none;
  }

  &.dragging {
    cursor: pointer;
    cursor: hand;
  }
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;

  &:before,
  &:after {
    content: "";
    display: table;
  }

  &:after {
    clear: both;
  }

  .slick-loading & {
    visibility: hidden;
  }
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  [dir="rtl"] & {
    float: right;
  }
  img {
    display: block;
  }
  img.photo.image {
    height: 300px;
  }
  &.slick-loading img {
    display: none;
  }

  display: none;

  &.dragging img {
    pointer-events: none;
  }

  .slick-initialized & {
    display: block;
  }

  .slick-loading & {
    visibility: hidden;
  }

  .slick-vertical & {
    display: block;
    height: auto;
    border: 1px solid transparent;
  }
}

.slick-arrow.slick-hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://pimg.com.ar/hammer/slick.min.js"></script>

<!-- Slider -->
<div class="slider">
    <div>
        <img src="http://placehold.it/150x200" alt="1" />
    </div>
    <div>
        <img src="http://placehold.it/150x200" alt="2" />
    </div>
    <div>
        <img src="http://placehold.it/150x200" alt="3" />
    </div>
    <div>
        <img src="http://placehold.it/150x200" alt="4" />
    </div>
    <div>
        <img src="http://placehold.it/150x200" alt="5" />
    </div>
    <div>
        <img src="http://placehold.it/150x200" alt="6" />
    </div>
    <div>
        <img src="http://placehold.it/150x200" alt="7" />
    </div>
    <div>
        <img src="http://placehold.it/150x200" alt="8" />
    </div>
</div>

But how can I create the divider effect between the images? I'm guessing it's possible with CSS, but I'm not sure how.

Solution

This may help you. Maybe is not the perfect solution because I think it needs some others adjusts, but it works.

$(function(){
    $('.slider').slick({
        infinite: false,
        speed: 500,
        slidesToShow: 4,
        slidesToScroll: 4
    });
});

/* Default CSS for Slick library */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;

  .product-item-info-slick {
    display: inline-block;
    width: 24%;
  }
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;

  &:focus {
    outline: none;
  }

  &.dragging {
    cursor: pointer;
    cursor: hand;
  }
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;

  &:before,
  &:after {
    content: "";
    display: table;
  }

  &:after {
    clear: both;
  }

  .slick-loading & {
    visibility: hidden;
  }
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  [dir="rtl"] & {
    float: right;
  }
  img {
    display: block;
  }
  img.photo.image {
    height: 300px;
  }
  &.slick-loading img {
    display: none;
  }

  display: none;

  &.dragging img {
    pointer-events: none;
  }

  .slick-initialized & {
    display: block;
  }

  .slick-loading & {
    visibility: hidden;
  }

  .slick-vertical & {
    display: block;
    height: auto;
    border: 1px solid transparent;
  }
}

.slick-arrow.slick-hidden {
  display: none;
}

.slick-slide {
  transform: rotate(-10deg) scale(1.15,1.15) !important;
  margin: 0 13px;
  overflow: hidden;
}

.slick-slide img {
  transform: rotate(10deg) scale(1.22,1.22) !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://pimg.com.ar/hammer/slick.min.js"></script>

<!-- Slider -->
<div class="slider">
    <div>
        <img src="http://placehold.it/150x200" alt="1" />
    </div>
    <div>
        <img src="http://placehold.it/150x200" alt="2" />
    </div>
    <div>
        <img src="http://placehold.it/150x200" alt="3" />
    </div>
    <div>
        <img src="http://placehold.it/150x200" alt="4" />
    </div>
    <div>
        <img src="http://placehold.it/150x200" alt="5" />
    </div>
    <div>
        <img src="http://placehold.it/150x200" alt="6" />
    </div>
    <div>
        <img src="http://placehold.it/150x200" alt="7" />
    </div>
    <div>
        <img src="http://placehold.it/150x200" alt="8" />
    </div>
</div>