<section class="variable slider">
    <div>
      <a href="#"><img src="http://placehold.it/350x300?text=1"></a>
    </div>
    <div>
      <a href="#"><img src="http://placehold.it/350x300?text=2"></a>
    </div>
    <div>
      <a href="#"><img src="http://placehold.it/350x300?text=3"></a>
    </div>
  </section>
html, body {
      margin: 0;
      padding: 0;
    }

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

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

    .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: 1;
    }

    .slick-current {
      opacity: 1;
    }
    $(document).on('ready', function() { 
      $(".variable").slick({
        dots: true,
        infinite: false,
        speed: 300,
        slidesToShow: 2,
        slidesToScroll: 2,
        autoplay: true,
        autoplaySpeed: 1000, 
        responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 2,
            infinite: true,
            dots: true
          }
        },
        {
          breakpoint: 600,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 2
          }
        },
        {
          breakpoint: 480,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1
          }
        }
      ]
      });
      
    });

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/slick-carousel/1.8.1/slick.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js