jQuery('.home-carousel').slick({
  dots: false,
  infinite: true,
  speed: 500,
  slidesToShow: 5,
  slidesToScroll: 2,
  autoplay: true,
  pauseOnHover:true,
  rtl: true,
  appendArrows: $(".carousel-arrows"),
  prevArrow: '<button type="button" class="slick-prev"><i class="fa fa-angle-double-right"></i></button>',
  nextArrow: '<button type="button" class="slick-next"><i class="fa fa-angle-double-left"></i></button>',
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});