인프런 커뮤니티 질문&답변

Suk님의 프로필 이미지
Suk

작성한 질문수

프로그래밍 시작하기 : 웹 입문 (Inflearn Original)

인스타그램 코드 작성 후 동작을 해보았는데 버튼을 눌러도 넘어가질않네요

작성

·

231

0

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
 
여러번 HTML, JS코드를 리뷰했는데도 잘 동작이 되지 않습니다.
 
HTML, JS코드 첨부하겠습니다.
 
<!DOCTYPE html>
<html>
	<head>
		<title>Instagram</title>
		<link rel="stylesheet" type="text/css" href="styles/card.css">

	</head>
	<body>
		<section class="container">
			<article class="card">
				<header>
					<div class="circle-image">
						<img src="images/profile.png">
					</div>
					<div class="card-username">
						<span>Test User</span>
					</div>
					<div class="option-more">
						<button class="transparent-button">
							<img src="images/icons/mark.png">
						</button>
					</div>
				</header>
				<main>
					<div class="carousel" data="0">
						<div>
							<ul>
								<li><img src="images/mountain1.jpg">
								</li><li><img src="images/mountain2.jpg">
								</li><li><img src="images/mountain3.jpg">
								</li><li><img src="images/mountain4.jpg"></li>
							</ul>
							<div class="slide slide-left" style="display: none;"> 
								<!-- class 이름을 slide와 slide-left 둘 다 사용할 수 있다.-->
								<button class="transparent-button">
									  <img src="images/icons/arrow-left.png">
								</button>
							</div>
							<div class="slide slide-right">
								<button class="transparent-button">
									<img src="images/icons/arrow-right.png">
								</button>
							</div>
						</div>
						<footer>
							<div class="active"></div>
							<div></div>
							<div></div>
							<div></div>
						</footer>
					</div>
					<div class="card-container">
						<div class="card-buttons">
							<div>
								<button class="transparent-button">
									<img src="images/icons/heart.png">
								</button>
							</div>
							<div>
								<button class="transparent-button">
									<img src="images/icons/chat.png">
								</button>
							</div>
							<div>
								<button class="transparent-button">
									<img src="images/icons/paper-plane.png">
								</button>
							</div>
							<div class="last-card-button">
								<button class="transparent-button">
									<img src="images/icons/bookmark.png">
								</button>
							</div>
						</div>
						<div class="card-likes">
							좋아요 99,328개
						</div>
						<div class="card-content">
							<ul>
								<li>
									<div>
										<span>
											Test User
										</span> 본문 내용
									</div>
								</li>
								<li class="comment">
									<div>
										<span>
											Test User
										</span> 댓글 1
										<button class="transparent-button">
											<img src="images/icons/heart.png">
										</button>
									</div>
								</li>
								<li class="comment">
									<div>
										<span>
											Test User
										</span> 댓글 2
										<button class="transparent-button">
											<img src="images/icons/heart.png">
										</button>
									</div>
								</li>
							</ul>
						</div>
						<div class="card-time">13일 전</div>
				</div>
				</main>
				<footer class="card-comment">
					<input type="text" placeholder="댓글 달기" name="comment">
					<div>
						<button class="transparent-button">게시</button>
					</div>
				</footer>
			</article>
		</section>
		<script type="text/javascript" src="scripts/carousel.js"></script>
		<script type="text/javascript" src="scripts/smoothscroll.min.js"></script>
	</body>
</html>

 

 

window.addEventListener('load',function(){
	var carousels=document.getElementsByClassName('carousel');

	//make carousel Event
	for(var i=0;i<carousels.length;i++){
		addEventTocarousel(carousels[i]);
	}
});

function addEventTocarousel(carouselElement){
	var ulElem = carouselElement.querySelector('ul');
	var liElems = ulElem.querySelectorAll('li');

	//width 조절
	var liwidth = liElems[0].clientWidth;
	var adjustedwidth = liElems.length * liwidth;

	ulElem.style.width = adjustedwidth + 'px';

	//slide button event
	var slideButtons = carouselElement.querySelectorAll('.slide');
	for(var i=0; i<slideButtons.length;i++){
		slideButtons[i].addEventListener('click',createListenerslide(carouselElement){

		})
	}

}

function createListenerslide(carouselElement){
	return function(event){
		var clickedButton  = event.currentTarget;

		//값 가져오기
		var liElems = carouselElement.querySelectorAll('li');
		var licount=liElems.length;
		var currentIndex=carouselElement.attributes.data.value;

		//slidebutton check
		if(clickedButton.className.includes('right')&&currentIndex < licount-1){
			currentIndex++;
			scrollDiv(carouselElement,currentIndex);
		}
		else if(clickedButton.className.includes('left')&&currentIndex >0){
			currentIndex--;
			scrollDiv(carouselElement,currentIndex);
		}

		//indicator update
		updateIndicator(carouselElement, currentIndex);
		//decide slide button hide
		updateSlideButtonVisible(carouselElement, currentIndex, licount)
		//index value update
		carouselElement.attributes.data.value = currentIndex;
	}
}
function scrollDiv(carouselElement,nextIndex){
	var scrollable = carouselElement.querySelector('div');
	var liwidth = scrollable.clientWidth;
	var newleft = liwidth * nextIndex;

	scrollable.scrollTo({left: newleft, behavior: 'smooth'});
}

function updateIndicator(carouselElement, currentIndex){
	var indicators = carouselElement.querySelectorAll('footer > div');
	for(var i=0;i<indicators.length;i++){
		if(currentIndex == i){
			indicators[i].className='active';
		}
		else{
			indicators[i].className='';
		}
	}
}

function updateSlideButtonVisible(carouselElement, currentIndex, licount){
	var left=carouselElement.querySelector('.slide-left');
	var right=carouselElement.querySelector('.slide-right');

	if(currentIndex>0){
		left.style.display = 'block'  //보이도록
	}
	else{
		left.style.display = 'none' //숨김
	}

	if(currentIndex<licount -1){
		right.style.display = 'block';
	}
	else{
		right.style.display = 'none';
	}
}
HTML/CSSjavascript

답변 2

2

Suk님의 프로필 이미지
Suk
질문자

감사합니다!! 해결됐습니다

1

Taeho님의 프로필 이미지
Taeho

안녕하세요.

게시해주신 코드내용을 기반으로 확인해보니 addEventTocarousel 함수의 //slid button event의 반복문(for문)안에서 오타를 확인했습니다.

function addEventTocarousel(carouselElement){
	var ulElem = carouselElement.querySelector('ul');
	var liElems = ulElem.querySelectorAll('li');

	//width 조절
	var liwidth = liElems[0].clientWidth;
	var adjustedwidth = liElems.length * liwidth;

	ulElem.style.width = adjustedwidth + 'px';

	//slide button event
	var slideButtons = carouselElement.querySelectorAll('.slide');
	for(var i=0; i<slideButtons.length;i++){
		slideButtons[i].addEventListener('click',createListenerslide(carouselElement){

		})
	}

}

아래와 같이 slid button event 로직의 for문 안에 있는 부분을 수정해주시면 될 것 같습니다.

function addEventTocarousel(carouselElement){
	var ulElem = carouselElement.querySelector('ul');
	var liElems = ulElem.querySelectorAll('li');

	//width 조절
	var liwidth = liElems[0].clientWidth;
	var adjustedwidth = liElems.length * liwidth;

	ulElem.style.width = adjustedwidth + 'px';

	//slide button event
	var slideButtons = carouselElement.querySelectorAll('.slide');
	for(var i=0; i<slideButtons.length; i++){
		slideButtons[i].addEventListener('click',createListenerslide(carouselElement));
	}

}

 

위와 같이 수정해보시고 안되시면 다시 글 올려주시면 감사하겠습니다 :)

오늘도 즐거운 하루 되시길 바랍니다 .

Suk님의 프로필 이미지
Suk

작성한 질문수

전체 Q&A
질문하기