[셸위:게임 친구 매칭 사이트] 슬라이드 배너 구현

[셸위:게임 친구 매칭 사이트] 슬라이드 배너 구현

 

https://www.tojobcn.com/bbs/board.php?bo_table=html_board&wr_id=72

HTML 이미지 슬라이드 배너 소스 공유

 

		<div class="banner-container">
				<div class="banners">
					<img class="admin-main-2" alt="로고" src="../static/images/banner2.jpg">
				</div>
				<div class="banners">
					<img class="admin-main-2" alt="로고" src="../static/images/banner3.png">
				</div>
				<div class="banners">
					<img class="admin-main-2" alt="로고" src="../static/images/banner4.jpg">
				</div>
				<div class="banners">
					<img class="admin-main-2" alt="로고" src="../static/images/banner5.png">
				</div>
				<div class="banners">
					<img class="admin-main-2" alt="로고" src="../static/images/banner6.jpg">
				</div>
			</div>

<script>
/**
 * 
 */let currentBanner = 0;
 const banners = document.querySelectorAll(`.banners`);
 const bannerCount = banners.length;
 
 function showBanner(n) {
	 banners.forEach(banners => banners.style.display = 'none');
	 banners[n].style.display = 'block';
 }
 
 function nextBanner(){
	currentBanner = (currentBanner + 1)% bannerCount ;
	showBanner(currentBanner);
 }
 
 function prevBanner(){
	currentBanner = (currentBanner - 1 + bannerCount) % bannerCount;
	showBanner(currentBanner);
 }
 
 document.addEventListener('DOMContentLoaded',()=>{
	showBanner(currentBanner);
	setInterval(nextBanner, 2000);
 })
</script>