Tutorial: https://www.youtube.com/watch?v=AG_REG9p61E

<style>
.item {display: inline-block;}
.list {display:block !important;}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    outline: none;
}
.slick-slide, .slick-slide *{ outline: none !important; }
</style>

<script type="text/javascript" src="<https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js>"></script>

<script>

// when document is fully loaded
$( document ).ready(function() {

$('.list').slick({
  dots: false,
  speed: 1000,
  infinite: false,
  slidesToShow: 3,
  slidesToScroll: 1,
  arrows: false,
  touchThreshold:300,
  responsive: [
    {
      // tablet
      breakpoint: 991,
      settings: {
        slidesToShow: 2
      }
    },
    {
      // mobile portrait
      breakpoint: 479,
      settings: {
        slidesToShow: 1
      }
    }
  ]
});

$('.slider-prev').click(function(){
    $(this).closest('.section').find(".list").slick('slickPrev');
});

$('.slider-next').click(function(){
    $(this).closest('.section').find(".list").slick('slickNext');
});

});

</script>