inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

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

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

356

Suk

작성한 질문수 1

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/CSS javascript

답변 2

2

Suk

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

1

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));
	}

}

 

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

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

unregistered 이라 뜨며 작동하지 않습니다.

0

51

1

공부한 내용을 블로그에 정리해서 올려도되나요?

0

94

1

sublime text 설치 불가

0

176

1

사진과 본문 내용에 패딩이 40px 들어가 있는데 이유를 모르겠습니다

0

98

1

처음 질문과 옵션 관련 질문입니다.

0

89

1

마지막에 news 관련 질문

0

82

1

태그 닫는 단축키가 뭔가요?

0

169

1

강의에 사용하는 예제 코드 자료 있나요?

0

384

1

회원가입 폼 검증하기 실행이 안됩니다.

0

274

1

이미지랑 아이콘 파일을 어떻게 찾아요?

0

351

1

VS 코드는 절대 경로랑 상대 경로로 상위 문서 접근이 차단되어 있네요

0

475

0

프로젝트 고민 해결이 안되어 다시 올립니다.

0

393

1

프로젝트 고민 다시올립니다.

0

447

1

친구와의 프로젝트 고민

0

420

1

화면 오른쪽 스크롤이 넘어가질 않아요!

0

515

1

학과 설정

0

330

2

회원가입폼 검증 -2 에서 문제가생겼습니다

0

330

1

card.html 버튼 위치

0

601

1

carousel의 footer부분에

0

294

1

margin 값에 관한 질문입니다.

0

406

1

function clearMessages() 함수의 원리를 알고싶습니다

0

319

1

removeEventListener

0

235

1

버튼을 눌렀을때 케러셀의 이동

0

809

2

html 파일 올립니다!

0

375

1