Swiperで左右が少し見切れるスライダー

下記を記載する

app/views/lauouts/application.html.erb

<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css" />
 <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script> 

app/views/companies/search.html.erb

<div class="swiper ">
  <div class="swiper-wrapper ">
    
       
  </div>
  <!-- ページネーション -->
  <div class="swiper-pagination"></div>
  <!-- 前後の矢印 -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>
</div>

<script>
 const swiper = new Swiper(".swiper",{
    loop: true, //ループ
    speed: 300, 
    slidesPerView: 3, //１度に表示する枚数
    spaceBetween: 30, //スライド間の距離
    centeredSlides: true, //アクティブなスライドを中央にする
    //ページネーション
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    //前後の矢印
    navigation:{
      nextEl:".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    });
</script>