便利なカルーセル・Slick.jsの設置と矢印カスタマイズ[初心者でもわかりやすく]

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
				

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>

<div class="your-class">
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
</div>
		

$(document).ready(function(){
  $('.your-class').slick({
    setting-name: setting-value
  });
});

<section class="food-slider">
  <div class="container -narrow">
    <div class="autoplay">
      <!-- 1枚目の画像 -->
      <div class="food-slider__img">
        <img data-lazy=" <?php echo get_template_directory_uri(); ?>/dist/img/img_menu@2x.png"
          alt="山芋の磯部焼きのは中はもちもち、ふんわり食感。">
        <h3 class="title">山芋の磯辺焼き</h3>
      </div>
      <!-- 2枚目の画像 -->
      <div class="food-slider__img">
        <img data-lazy="<?php echo get_template_directory_uri(); ?>/dist/img/img_menu2@2x.jpg"
          alt="産地直送と市場から仕入れたての新鮮なお刺身">
        <h3 class="title">お刺身の盛り合わせ</h3>
      </div>
      <!-- 3枚目の画像 -->
      <div class="food-slider__img">
        <img data-lazy="<?php echo get_template_directory_uri(); ?>/dist/img/img_menu3@2x.jpg"
          alt="牡蠣鍋、あんこう鍋、ふぐちりなどボリュームたっぷりのお鍋">
        <h3 class="title">お鍋類</h3>
      </div>
      <!-- 4枚目の画像 -->
      <div class="food-slider__img">
        <img data-lazy="<?php echo get_template_directory_uri(); ?>/dist/img/img_menu4.jpg" alt="さっぱり豚肉にサラダをまぜてすっきり">
        <h3 class="title">豚肉サラダ</h3>
      </div>
    </div>
  </div><!-- /.container -->
</section><!-- /.slider -->

$('.autoplay').slick({
  centerMode: true,
  centerPadding: '60px',
  lazyLoad: 'ondemand',
  dots:false,
  slidesToShow: 3,
  // slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 3000,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 2,
        // slidesToScroll: 2,
        infinite: true,
   
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        // slidesToScroll: 1,
        arrows:false,
        dots:true
      }
    },
  ]
});
		

/* Arrows */
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    border-radius: 50%;
    width: 54px;
    height: 54px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    z-index: 2;
    cursor: pointer;
    color: transparent;
    border:3px solid #fff;
    outline: none;
    background: #B48D30;
    
   
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
  
    outline: none;
    background: #b7decf;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    color: #b7decf;
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}
.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;
    opacity: .75;
    color: white;
    z-index: 2 !important;
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-30%, -50%) rotate(-45deg);
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    width: 15px;
    height: 15px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-next
{
    right: -25px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -25px;
}
.slick-next:before
{
    transform: translate(-70%, -50%) rotate(135deg);
    /* content: '→'; */
}