JSFiddle - React, Tailwind, and code Playground

by xxxvvvxxx

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
<script src='https://code.jquery.com/jquery-1.9.1.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.0.1/swiper-bundle.min.js"></script>
<div class="main-banner">
	<div class="slider">
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
						<div class="pc">
							<a href="https://www.dtryx.com/movie/view.do?cgid=FE8EF4D2-F22D-4802-A39A-D58F23A29C1E&amp;MovieCd=022267"><img src="https://img.dtryx.com/intromain/2023/05/C951B840-4F8F-418B-BF64-622B527D7DC2.large.png" alt="분노의 질주: 라이드 오어 다이"></a>
							<a href="#" class="show-movie" data-vod="https://img.dtryx.com/video/2023/05/78066B38-3C49-47F4-8626-985A2BF52910.mp4"><img src="/resources/img/main/ico_play.svg"></a></div>
					</div>
				<div class="swiper-slide">
						<div class="pc">
							<a href="https://www.dtryx.com/movie/view.do?cgid=FE8EF4D2-F22D-4802-A39A-D58F23A29C1E&amp;MovieCd=022135"><img src="https://img.dtryx.com/intromain/2023/04/46769193-51A1-4454-A4BE-0FD2AAE94C88.large.png" alt="슬픔의 삼각형"></a>
							<a href="#" class="show-movie" data-vod="https://img.dtryx.com/video/2023/04/31E1644E-4E92-450A-BF71-CE97D450BC14.mp4"><img src="/resources/img/main/ico_play.svg"></a></div>
					</div>
				<div class="swiper-slide">
						<div class="pc">
							<a href="https://www.dtryx.com/movie/view.do?cgid=FE8EF4D2-F22D-4802-A39A-D58F23A29C1E&amp;MovieCd=022227"><img src="https://img.dtryx.com/intromain/2023/05/D12BF401-0613-4EDD-868D-5067D0DADD62.large.png" alt="아기공룡 둘리-얼음별 대모험"></a>
							<a href="#" class="show-movie" data-vod="https://img.dtryx.com/video/2023/05/D74B0CF0-BF9D-4300-86C4-91969C8C98CD.mp4"><img src="/resources/img/main/ico_play.svg"></a></div>
					</div>
				</div>
		</div>
		<div class="controls">
			<div class="swiper-button-prev"></div>
			<div class="swiper-pagination"></div>
			<div...

CSS

html {
	overflow-x: hidden;
}
.main-banner .swiper-slide {
    width: 1235px !important;
}
.main-banner .swiper-slide > div {
    position: relative;
}
.main-banner .swiper-slide > div .show-movie {
    position: absolute;
    right: 17.7%;
    top: 41.5%;
}

JavaScript

$(function() {
	var mainBannerTotal = $('.main-banner .swiper-slide').length;
	$('.main-banner .num em').text(mainBannerTotal);
	var mainSwiper = new Swiper('.main-banner .swiper-container', {
		slidesPerView: 'auto',
		centeredSlides: true,
		spaceBetween: 15,
		autoplay: {
			delay: 4000,
			disableOnInteraction: false,
		},
		loop: true,
		loopFillGroupWithBlank: true,
		pagination: {
			el: '.main-banner .swiper-pagination',
			type: 'bullets',
		},
		navigation: {
			nextEl: '.main-banner .swiper-button-next',
			prevEl: '.main-banner .swiper-button-prev',
		},
		breakpoints: {
			1024: {
				spaceBetween: 34,
				pagination: {
					type: 'progressbar',
				}
			}
		}
	});
});