Swiper

<!-- スライダーのメインコンテナ要素（必須） -->
<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,
    }
},
});