swiper 基本設定

<div class="swiper-container">
  <ul class="swiper-wrapper">
    <li class="swiper-slide"></li>
    <li class="swiper-slide"></li>
  </ul>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

const mySwiper = new Swiper ('.swiper-container', {
  speed: 800,
  slidesPerView: 'auto',
  spaceBetween: 0,
  centeredSlides: true,
  loop: true,
  //autoHeight: true,
  //effect: 'fade',
  autoplay: {
   	delay: 5000,
    //disableOnInteraction: true,
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
    //type: 'fraction',
  },
  navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
  },
  breakpoints: {
    // when window width is >= 780px
    780: {
      slidesPerView: 2,
    },
  }
})

.swiper-container{
	padding-bottom: 0;
}

.swiper-slide{
	height: auto;//高さ揃える
}
.swiper-pagination{
	position: relative;
	bottom: 0;
	margin-top: 15px;
	.swiper-pagination-bullet{
		width: 8px;
		height: 8px;
		margin: 0 3px!important;
	}
	.swiper-pagination-bullet-active{
		background-color: #f00;
	}
}

.swiper-button-next,
.swiper-button-prev{
  display: flex;
  justify-content: center;
  align-items: center;
	&:focus{
		outline: none;
	}
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}