<section class="variable">
    <div>
      <img src="http://placehold.it/350x100?text=1">
    </div>
    <div>
      <img src="http://placehold.it/350x100?text=2">
    </div>
    <div>
      <img src="http://placehold.it/350x100?text=3">
    </div>
    <div>
      <img src="http://placehold.it/350x100?text=4">
    </div>
    <div>
      <img src="http://placehold.it/350x100?text=5">
    </div>
    <div>
      <img src="http://placehold.it/350x100?text=6">
    </div>
    <div>
      <img src="http://placehold.it/350x100?text=7">
    </div>
    <div>
      <img src="http://placehold.it/350x100?text=8">
    </div>
    <div>
      <img src="http://placehold.it/350x100?text=9">
    </div>
    <div>
      <img src="http://placehold.it/350x100?text=10">
    </div>
  </section>
  html, body {
      margin: 0;
      padding: 0;
    }

    * {
      box-sizing: border-box;
    }

    .slider {
        width: 50%;
        margin: 100px auto;
    }

    .slick-slide {
      margin: 0px 20px;
    }

    .slick-slide img {
      width: 100%;
    }

    .slick-prev:before,
    .slick-next:before {
      color: black;
    }


    .slick-slide {
      transition: all ease-in-out .3s;
      opacity: .2;
    }
    
    .slick-active {
      opacity: .5;
    }

    .slick-current {
      opacity: 1;
    }
$('.variable').slick();

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css
  2. https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js