-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
인스타그램 코드 작성 후 동작을 해보았는데 버튼을 눌러도 넘어가질않네요
22.06.29 01:27 작성 조회수 162
0
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 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')&¤tIndex < licount-1){
currentIndex++;
scrollDiv(carouselElement,currentIndex);
}
else if(clickedButton.className.includes('left')&¤tIndex >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';
}
}
답변을 작성해보세요.
2
1
Taeho
2022.06.29
안녕하세요.
게시해주신 코드내용을 기반으로 확인해보니 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));
}
}
위와 같이 수정해보시고 안되시면 다시 글 올려주시면 감사하겠습니다 :)
오늘도 즐거운 하루 되시길 바랍니다 .
답변 2