カルーセルスライダー

https://www.omakase.net/blog/2020/11/swiper.html

HTML以下コピペ

<div class="gazoubox">
		 <mainslide>
   <div id="slide">
    <div class="swiper-container">
     <ul class="swiper-wrapper">
      <!-- スライドする画像 -->
      <li class="swiper-slide"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/main1.jpg" >
      </li>
   <li class="swiper-slide"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/main2.jpg" width="821" height="401" alt=""/>
      </li>
		  <li class="swiper-slide"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/main1.jpg" width="821" height="401" alt=""/>
      </li>
		  <li class="swiper-slide"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/main2.jpg" width="821" height="401" alt=""/>
      </li>
      <!-- /スライドする画像 -->
     </ul>
    </div>
   </div>
			 <script type="text/javascript">
  var mySwiper = new Swiper ('.swiper-container', {
   slidesPerView:2.31,//画像を何枚表示するか
   spaceBetween: 0,//何ピクセル画像の間隔をあけるか
   centeredSlides : true,//見切らせたい場合メイン画像をセンターにもってくるか
   //自動再生する場合
   autoplay: {
   delay: 6000, //3秒後に次の画像に代わる
   },
   loop: true,//最後の画像までいったらループする
   //ページネーションをつける場合
   pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true,
   },
   //左右のナビゲーションをつける場合
   navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
   }
  });
</script>
  </mainslide>
		</div>	

CSS　以下コピペ

header{ top:0; z-index:100; }
mainslide{ width:100%; }
#slide{ margin:0 auto; }
.swiper-container{ witdh:100%; }
.swiper-slide-next,.swiper-slide-prev{ opacity: 0.5; }
.swiper-button-prev::before,.swiper-button-next::before {
font-size:32px;
color:#fff;
font-weight:900;
}
.swiper-button-prev::before { content: “←”; }
.swiper-button-next::before { content: “→”; }
li.swiper-slide{
list-style-type: none;margin:0;padding:0;max-width: 821px;　←注意！画像サイズを入れておいた方がよい
}