【HTML+CSS+jQuery】slick（スライダー）の実装とオプションによるカスタマイズ方法（レスポンシブ対応）

  <!-- slick -->
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">

  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
    crossorigin="anonymous"></script>
  <!-- slick -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"
    integrity="sha512-HGOnQO9+SP1V92SrtZfjqxxtLmVzqZpjFFekvzZVWoiASSQgSr4cw9Kqd2+l8Llp4Gm0G8GIFJ4ddwZilcdb8A=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <!-- script -->
  <script src="js/script.js"></script>

      <div class="slickBox">
        <div id="js-slider" class="slider">
          <div class="slider_img"><img src="img/cat1.jpg" alt=""><span class="caption">cat1</span></div>
          <div class="slider_img"><img src="img/cat2.jpg" alt=""><span class="caption">cat2</span></div>
          <div class="slider_img"><img src="img/cat3.jpg" alt=""><span class="caption">cat3</span></div>
          <div class="slider_img"><img src="img/cat4.jpg" alt=""><span class="caption">cat4</span></div>
          <div class="slider_img"><img src="img/cat5.jpg" alt=""><span class="caption">cat5</span></div>
          <div class="slider_img"><img src="img/cat6.jpg" alt=""><span class="caption">cat6</span></div>
          <div class="slider_img"><img src="img/cat1.jpg" alt=""><span class="caption">cat1</span></div>
          <div class="slider_img"><img src="img/cat2.jpg" alt=""><span class="caption">cat2</span></div>
          <div class="slider_img"><img src="img/cat3.jpg" alt=""><span class="caption">cat3</span></div>
          <div class="slider_img"><img src="img/cat4.jpg" alt=""><span class="caption">cat4</span></div>
        </div>
      </div>

@use '../global'as g;

.slickBox {
  width: 100%;
  text-align: center;

  .slider {
    display: none;
    opacity: 0;
    transition: opacity .3s linear;

    &.slick-initialized {
      display: block;
      opacity: 1;
    }

    .slick-slide {
      margin: 0 12px;
      width: 215px;

      @include g.sp {
        margin: 0 0.75rem;
        width: 12.5rem;
      }

      .slider_img {

        .caption {
          display: block;
          margin-top: 20px;
          line-height: 1.5;
          font-size: 16px;
          font-weight: 500;
        }
      }
    }
  }
}

$(function () {
  $('#js-slider').slick({
    autoplay: true, //自動再生
    autoplaySpeed: 1000, //自動再生スピード
    arrows: false, // 前・次のボタンを表示する
    dots: false, // ドットナビゲーションを表示する
    appendDots: $('.dots-2'), // ドットナビゲーションの生成位置を変更
    speed: 500, // スライドさせるスピード（ミリ秒）
    slidesToShow: 3, // 表示させるスライド数
    centerPadding: '50%', //両サイドの見えている部分のサイズ
    centerMode: true, // slidesToShowが奇数のとき、現在のスライドを中央に表示する
    variableWidth: true, // スライド幅の自動計算を無効化
    responsive: [
      {
        breakpoint: 768,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
    ]
  });
});

$('#js-slider').slick({
  accessibility: true,
  adaptiveHeight: false,
  autoplay: true,
  autoplaySpeed: 3000,
  arrows: true,
  prevArrow: '<img class="slick-prev" src="img/prev.png">',
  nextArrow: '<img class="slick-next" src="img/next.png">',
  centerMode: false,
  centerPadding: '50px',
  cssEase: 'ease-in',
  dots: true,
  draggable: true,
  fade: false,
  slidesToShow: 1, //fade:false時のみ
  easing: 'linear',
  infinite: true,
  edgeFriction: 0.15,
  initialSlide: 0,
  lazyLoad: 'ondemand',
  mobileFirst: false,
  pauseOnFocus: true,
  pauseOnHover: true,
  pauseOnDotsHover: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  speed: 300,
  swipe: true,
  touchMove: true,
  variableWidth: false,
  vertical: false,
  verticalSwiping: false,
  rtl: false,
  zIndex: 1000,
});