인프런 커뮤니티 질문&답변
작성한 질문수
버튼 자바스크립트 오류
작성
·
489
0
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화window.addEventListener('load', function() {
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화window.addEventListener('load', function() {
var carousels = document.getElementsByClassName('carousel');
//케러셀 이벤트를 등록하는 로직
for(var i = 0; i < carousels.length; i++) {
addEventToCarousel(carousels[i]); // 현재해당하는 carousels 가져옴(배열)
}
});
function addEventToCarousel(carouselElem) {
var ulElem = carouselElem.querySelector('ul');
var liElems = ulElem.querySelectorAll('li');
//너비값 조정
var liWidth = liElems[0].clientWidth;
var adjustedWidth = liElems.length * liWidth;
ulElem.style.width = adjustedWidth + 'px';
//슬라이더 버튼 이벤트 등록
var slideButtons = carouselElem.querySelectorAll('.slide');
//슬라이드 버튼 갯수만큼 반복
for (var i=0; i < slideButtons.length; i++) {
slideButtons[i].addEventListener('click', createListenerSlide(carouselElem));
}
}
//클로저로 해서 캐러셀을 이벤트가 호출될때 바뀌지 않고 사용하기 위해
function createListenerSlide(carouselElem) {
return function(event) { //event는 매개변수고 이 블록안에서 사용가능
var clickedButton = event.currentTarget;//현재 클릭한 버튼 가져오기
// 값 가져오기
var liElems = carouselElem.querySelectorAll('li');
var liCount = liElems.length;
var currentIndex = carouselElem.attributes.data.value;
//currentIndex : 현재 보고있는 이미지의 순번
//carouselElem의 모든 속성을 가져오고 데이터를 가져오겠다
//슬라이드 버튼 체크 right값을 포함하는지
//-1해주는이유는 다섯개일경우 마지막은 4가 마지막이기때문
if(clickedButton.className.includes('right') && currentIndex < liCount - 1) {
currentIndex ++;
scrollDiv(carouselElem, currentIndex);
//위에서 3이라면 ++되므로 4번의 위치로 스크롤을 조정해주는 역할
} else if(clickedButton.className.includes('left') && currentIndex > 0) {
currentIndex --; //0이면 왼쪽으로 못넘김
scrollDiv(carouselElem, currentIndex);
}
//인디케이터 업데이트
//슬라이드 버튼 보여줌 여부 업데이트
//새롭게 보여지는 이미지 인덱스 값을 현재 data 값으로 업데이트
carouselElem.attributes.data.value = currentIndex;
}
}
function scrollDiv(carouselElem, nextIndex) {
var scrollable = carouselElem.querySelector('div');
var liWidth = scrollable.clientWidth;
var newLeft = liWidth * nextIndex;
scrollable.scrollTo({left: newLeft, behavior: 'smooth'});
}
버튼을 눌러도 사진이 오른쪽으로 가지 않는데 어느 코드에서 에러가 난걸까요?????
답변 2
0
정준영
질문자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style/card.css"/>
<script src="script/carousel.js" defer></script>
<title>인스타그램</title>
</head>
<body>
<section class="container">
<article class="card">
<header>
<div class="circle-image">
<img src = "images/profile.png"/>
</div>
<div class="card-username">
<span>inflearn</span>
</div>
<div class="option-more">
<button class="transparent"><img src="images/icons/mark.png"/></button>
</div>
</header>
<main>
<div class="carousel" data="0"><!-- 케러셀 들어갈 영역-->
<div> <!-- 이 박스는 슬라이드를 위한 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> <!-- 첨엔 왼쪽 버튼 안보여야해 display:none 실시-->
<div class="slide slide-left" style = "display: none">
<button class="transparent">
<img src ="images/icons/arrow-left.png"/>
</button>
</div>
<div class="slide slide-right">
<button class="transparent">
<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">
<img src = "images/icons/heart.png"/>
</button>
</div>
<div>
<button class="transparent">
<img src = "images/icons/chat.png"/>
</button>
</div>
<div>
<button class="transparent">
<img src = "images/icons/paper-plane.png"/>
</button>
</div>
<div class="last-card-button">
<button class="transparent">
<img src = "images/icons/bookmark.png"/>
</button>
</div>
</div>
<div class="card-likes">
좋아요 999,999개
</div>
<div class="card-content">
<ul>
<li>
<div>
<span>본문내용</span>
</div>
</li>
<li class="comment">
<div>
<span>댓글 1</span>
<button class="transparent">
<img src = "images/icons/heart.png"/>
</button>
</div>
</li>
<li class="comment">
<div>
<span>댓글 2</span>
<button class="transparent">
<img src = "images/icons/heart.png"/>
</button>
</div>
</li>
</ul>
</div>
<div class="card-time">
7일전
</div>
</div>
</main>
<footer class="card-comment">
<input type="text" placeholder="댓글 달기"/>
<div>
<button class="transparent">
게시물
</button>
</div>
</footer>
</article>
</section>
<script type="text/javascript" src="script/carousel.js"></script>
</body>
</html> html코드 파일입니다!!
0
안녕하세요,
정준영님.
제가 기존에 가지고 있던 html파일과 css파일을 그래도 활용하면서, 올려주신 코드만 넣어서 테스트를 해보았는데, 캐로셀이 오른쪽으로 이동하며 잘 작동합니다.
html 파일을 추가로 확인을 해야 어디서 발생했는지 오류를 정확히 확인할 수 있을 것 같습니다.
감사합니다.