자바스크립트 질문드립니다.
본문
안녕하세요.
https://codepen.io/alvarotrigo/pen/gOmgRzL
를 참고해서
마우스 휠을 돌리면
li 영역을 가로로 돌릴 수 있게 하고 싶은데요
<style>
#main {
overflow-x: hidden;
display: flex;
}
li {display: flex; float:left; margin-right:20px}
</style>
<div id="main">
<ul>
<li><img src="<?php echo G5_THEME_IMG_URL?>/1.jpg"></li>
<li><img src="<?php echo G5_THEME_IMG_URL?>/1.jpg"></li>
<li><img src="<?php echo G5_THEME_IMG_URL?>/1.jpg"></li>
<li><img src="<?php echo G5_THEME_IMG_URL?>/1.jpg"></li>
<li><img src="<?php echo G5_THEME_IMG_URL?>/1.jpg"></li>
</ul>
</div>
<script>
const scrollContainer = document.querySelector("#main");
scrollContainer.addEventListener("wheel", (evt) => {
evt.preventDefault();
scrollContainer.scrollLeft += evt.deltaY;
});
</script>
이렇게 해보는중인데 도통 반응도 없고
li에 float:left; 도 안되고
codepen 예시 페이지처럼 되질않네요 ㅠ
혹시 알고 계신 고수님들 도움 부탁드립니다.ㅜ ㅜ
감사합니다
답변 2
될리가 있나요...
각 섹션의 너비가 할당되어 있지 않은데..
section {
min-width: 50vw;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 4ch;
}
section:nth-child(even) {
background-color: teal;
color: white;
}
오브젝트 너비부터 정의해보세요.
그리고 코드를 임의로 바꾸지마시고
원본 코드를 우선 그대로 실행하고 이후에 조금씩 수정하는 방향으로 작업해보세요.
코드펜 코드 그대로 사용하시고, h1태그 자리에 이미지 태그 넣으시면 될 듯.
답변을 작성하시기 전에 로그인 해주세요.