swiperスライダー（自動再生・ページネーションあり・矢印なし・PC3列・スマホ1列）

<div class="swiper">
	<div class="swiper-wrapper">
		<div class="swiper-slide">
			<div class="swiper__img">
				<img src="https://kk-works.koukoba.net/wp-content/uploads/2023/04/990d00.webp" alt="スライド" width="300" height="300">
			</div>
			<p>テキストテキストテキスト</p>
			<p class="swiper__ttl">コメントコメントコメントコメントコメントコメント</p>
		</div>
		<div class="swiper-slide">
			<div class="swiper__img">
				<img src="https://kk-works.koukoba.net/wp-content/uploads/2023/04/e87619.webp" alt="スライド" width="300" height="300">
			</div>
			<p>テキストテキストテキスト</p>
			<p class="swiper__ttl">コメントコメントコメントコメントコメントコメント</p>
		</div>
		<div class="swiper-slide">
			<div class="swiper__img">
				<img src="https://kk-works.koukoba.net/wp-content/uploads/2023/04/ffdc00.webp" alt="スライド" width="300" height="300">
			</div>
			<p>テキストテキストテキスト</p>
			<p class="swiper__ttl">コメントコメントコメントコメントコメントコメント</p>
		</div>
		<div class="swiper-slide">
			<div class="swiper__img">
				<img src="https://kk-works.koukoba.net/wp-content/uploads/2023/04/0079f2.webp" alt="スライド" width="300" height="300">
			</div>
			<p>テキストテキストテキスト</p>
			<p class="swiper__ttl">コメントコメントコメントコメントコメントコメント</p>
		</div>
		<div class="swiper-slide">
			<div class="swiper__img">
				<img src="https://kk-works.koukoba.net/wp-content/uploads/2023/04/008039.webp" alt="スライド" width="300" height="300">
			</div>
			<p>テキストテキストテキスト</p>
			<p class="swiper__ttl">コメントコメントコメントコメントコメントコメント</p>
		</div>
		<div class="swiper-slide">
			<div class="swiper__img">
				<img src="https://kk-works.koukoba.net/wp-content/uploads/2023/04/ffdc00.webp" alt="スライド" width="300" height="300">
			</div>
			<p>テキストテキストテキスト</p>
			<p class="swiper__ttl">コメントコメントコメントコメントコメントコメント</p>
		</div>
		<div class="swiper-slide">
			<div class="swiper__img">
				<img src="https://kk-works.koukoba.net/wp-content/uploads/2023/03/012.webp" alt="スライド" width="300" height="300">
			</div>
			<p>テキストテキストテキスト</p>
			<p class="swiper__ttl">コメントコメントコメントコメントコメントコメント</p>
		</div>
	</div>
	<div class="swiper-pagination"></div>
</div>

.swiper {
    padding-bottom: 50px;
    visibility: hidden;
}
.swiper-wrapper {
    height: auto;
}
.swiper.swiper-initialized {
    visibility: visible;
}
.swiper__img {
    position: relative;
    margin: 0 auto;
}
.swiper__img::before {
    content: "";
    display: block;
    padding-top: 100%;
}
.swiper__img img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.swiper__ttl {
    margin-top: 16px;
    line-height: 1.5;
}
.swiper-slide img {
    border-radius: 10px;
}

@media screen and (min-width: 768px) {
    .swiper__ttl {
        font-size: 20px;
    }
}
@media screen and (max-width: 767px) {
    .swiper__ttl {
        font-size: 18px;
    }
}

const swiper = new Swiper(".swiper", {
	autoplay: {
		delay: 3000,
	},
	centeredSlides: true,
	breakpoints: {
		768: {
			slidesPerView: 3,
			spaceBetween: 30,
		}
	},
	loop: true,
	pagination: {
		el: ".swiper-pagination",
		clickable: true,
	},
	slidesPerView: 1,
});