スライドショーを実装できるSwiperとSlick、Splideの違い

  <div class="l-container">
    <ul class="p-cards js-slick-slide">
      <li class="p-cards__item p-card">
        <a href="">
          <div class="p-card__img">
            <img src="https://drive.google.com/uc?export=view&id=1acK5aIgriJP8K017fY7IBDSPPzZvLCSh" alt="">
          </div>
        </a>
      </li>
      <li class="p-cards__item p-card">
        <a href="">
          <div class="p-card__img">
            <img src="https://drive.google.com/uc?export=view&id=1LdDr5vvHVGZeph6xAQHi08ju5ISCg0yb" alt=""> </div>
        </a>
      </li>
      <li class="p-cards__item p-card">
        <a href="">
          <div class="p-card__img">
            <img src="https://drive.google.com/uc?export=view&id=1q4dZQHzWokyE_Q7LSg0s55LXucAynZoE" alt=""> </div>
        </a>
      </li>
      <li class="p-cards__item p-card">
        <a href="">
          <div class="p-card__img">
            <img src="https://drive.google.com/uc?export=view&id=1acK5aIgriJP8K017fY7IBDSPPzZvLCSh" alt="">
          </div>
        </a>
      </li>
      <li class="p-cards__item p-card">
        <a href="">
          <div class="p-card__img">
            <img src="https://drive.google.com/uc?export=view&id=1LdDr5vvHVGZeph6xAQHi08ju5ISCg0yb" alt=""> </div>
        </a>
      </li>
      <li class="p-cards__item p-card">
        <a href="">
          <div class="p-card__img">
            <img src="https://drive.google.com/uc?export=view&id=1q4dZQHzWokyE_Q7LSg0s55LXucAynZoE" alt=""> </div>
        </a>
      </li>
    </ul>
  </div>

.l-container {
  max-width: 80%;
  margin-right: auto;
  margin-left: auto;
}

.p-cards {
  width: 80%;
  height: auto;
  margin: auto;
}

.p-cards__item {
  max-width: 800px;
  width: 100%;
  margin-right: 10px;
  height: auto;
}


.p-card__img img {
  width: 100%;
  height: inherit;
  display: block;
}

.p-cards__item img {
  width: 100%;
  object-fit: cover;
}

.slick-prev:before,
.slick-next:before {
  color: gray;
}

$('.js-slick-slide').slick({
  autoplay: true, // 自動再生
  dots: true, //ドットのナビ表示
  arrows: true, // 前・次のスライド切り替える矢印表示
  slidesToShow: 3, //表示するスライド枚数
  slideToScroll: 1, //1回で動くスライド数
  autoplaySpeed: 3000, // 再生速度（ミリ秒）
  infinite: true, // 無限再生
  cssEase: 'linear', // アニメーションイージング
  responsive: [{
    breakpoint: 768, // ブレイクポイントを指定
    settings: {
      slidesToShow: 2,
      },
    },
  ]
});

<!-- スライダーのメインコンテナ要素（必須） -->
<div class="swiper">
  <!-- スライドを囲む要素（必須） -->
  <div class="swiper-wrapper">
    <!-- スライド要素（必須） -->
      <div class="swiper-slide"><img src="https://drive.google.com/uc?export=view&id=1acK5aIgriJP8K017fY7IBDSPPzZvLCSh"
          alt=""></div>
      <div class="swiper-slide"><img src="https://drive.google.com/uc?export=view&id=1LdDr5vvHVGZeph6xAQHi08ju5ISCg0yb"
          alt=""></div>
      <div class="swiper-slide"><img src="https://drive.google.com/uc?export=view&id=1q4dZQHzWokyE_Q7LSg0s55LXucAynZoE"
          alt=""></div>
      <div class="swiper-slide"><img src="https://drive.google.com/uc?export=view&id=1LdDr5vvHVGZeph6xAQHi08ju5ISCg0yb"
          alt=""></div>
    </div>
  </div>

    <!-- ページネーション（省略可） -->
    <div class="swiper-pagination"></div>
    <!-- ナビゲーションボタン（省略可） -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- スクロールバー（省略可） -->
    <div class="swiper-scrollbar"></div>
</div>

.swiper{
  width: 100%;
  height: 500px;
}

.swiper-slide img{
  width: inherit;
  height: inherit;
  object-fit: cover;

}

.swiper-pagination span {
  background: red;
}

.swiper-button-next, .swiper-button-prev {
  color: red;
}

.swiper-scrollbar {
  background: red;
}

let mySwiper = new Swiper('.swiper', {
  // /オプション設定
  loop: true, // スライド無限ループ
  speed: 1000, // スライドアニメーション速度（ミリ秒）
  slidesPerView: 1, // 画像の表示枚数
  autoplay: { // スライド自動再生
    delay: 2000, // スライド間の遷移遅延時間(ミリ秒)
  },

  pagination: { // ページネーション
    el: '.swiper-pagination', // ページネーション要素指定
    type: 'bullets', // ページネーションの種類
    clickable: true,//クリックに反応させる設定
  },

  navigation: { // ナビゲーション
    nextEl: '.swiper-button-next',// 「次へボタン」要素指定
    prevEl: '.swiper-button-prev',// 「前へボタン」要素指定
  },

  scrollbar: {// スクロールバー
    el: '.swiper-scrollbar', // スクロールバー要素指定
  },

  breakpoints: { // ブレイクポイント
    768: { // 画面幅768px以上で適用
      spaceBetween: 40, // 画像間の余白（px）
      slidesPerView: 2,
    }
  },
});

<section class="splide" aria-labelledby="carousel-heading">
      <h2 id="carousel-heading">splide構造</h2>
      <div class="splide__track">
        <ul class="splide__list">
          <li class="splide__slide">
            <img src="https://drive.google.com/uc?export=view&id=1acK5aIgriJP8K017fY7IBDSPPzZvLCSh" alt="">
          </li>
          <li class="splide__slide">
            <img src="https://drive.google.com/uc?export=view&id=1LdDr5vvHVGZeph6xAQHi08ju5ISCg0yb" alt="">
          </li>
          <li class="splide__slide">
            <img src="https://drive.google.com/uc?export=view&id=1q4dZQHzWokyE_Q7LSg0s55LXucAynZoE" alt="">
          </li>
          <li class="splide__slide">
            <img src="https://drive.google.com/uc?export=view&id=1LdDr5vvHVGZeph6xAQHi08ju5ISCg0yb" alt="">
          </li>
          <li class="splide__slide">
            <img src="https://drive.google.com/uc?export=view&id=1acK5aIgriJP8K017fY7IBDSPPzZvLCSh" alt="">
          </li>
        </ul>
      </div>
</section>

.splide__slide img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

new Splide(".splide", {
  autoplay: true, // 自動再生（デフォルトはfalse）
  interval: 2000, // 自動再生の間隔（autoplay有効時のみ）
  speed: 1000, // スライドの移動時間
  rewind: true, // スライドがの最後まで行ったら先頭に戻る（デフォルトはfalse）
  type: "slide", // スライドのエフェクト：スライド
  perPage: 2, // 1ページに何枚スライドを表示するか
  gap:"16px", // スライド間余白
  breakpoints: { // ブレイクポイントの設定
    640: {
      perPage: 1,
    },
  }
}).mount();

new Splide(".splide").mount();