728x90
아래와 같은 이미지 슬라이드를 만들어보겠습니다.
css와 자바스크립트를 활용합니다.
See the Pen Untitled by zenna (@zenna9) on CodePen.
html코드
<body>
<div class="conta">
<div class="slide">
<div class="toleft">
<i class="fa-solid fa-angle-left fa-2xl"></i>
</div>
<div class="content">
<!-- 여기서부터 슬라이드할 이미지 구역이 시작됩니다.
원하는 사진의 개수만큼 slides의 개수를 조절하세요-->
<!-- 단 슬라이드의 id는 "slide" 뒤에 0부터 시작하는 숫자가 붙는 형태여야 합니다.-->
<div class="slides" id="slide0">
<img src="https://cdn.pixabay.com/photo/2021/08/22/06/24/bird-6564285__340.jpg"/>
</div>
<div class="slides" id="slide1">
<img src="https://cdn.pixabay.com/photo/2022/03/30/17/54/seagull-7101611__340.jpg">
</div>
<div class="slides" id="slide2">
<img src="https://cdn.pixabay.com/photo/2022/05/29/05/36/otter-7228458__340.jpg">
</div>
<div class="slides" id="slide3">
<img src="https://cdn.pixabay.com/photo/2022/06/02/06/43/flowers-7237133__340.jpg">
</div>
<div class="slides" id="slide4">55</div>
</div>
<div class="toright">
<i class="fa-solid fa-angle-right fa-2xl"></i>
</div>
</div>
</div>
<!--아래는 좌우 화살표 모양을 위한 이모지사이트 링크-->
<script src="https://kit.fontawesome.com/d505e57471.js" crossorigin="anonymous"></script>
</body>css 코드
/* borderzone */
/* 만들면서 어떤 구역의 크기가 틀리고,
어떤 구역이 빗나가있는지 확인하기 위한 용도이므로 배포 시 삭제하시면 됩니다. */
.conta{border: 1px rgb(142, 214, 34) solid;}
.toleft{border: 1px rgb(253, 193, 104) solid;}
.toright{border: 1px rgb(252, 185, 98) solid;}
.content{border: 1px rgb(188, 152, 255) solid;}
.slide{border: 2px rgb(99, 224, 255) solid;}
#slides{border: 2px rgb(2, 75, 47) solid;}
/* ===================== */
body{
margin: 0;
padding: 0;
}
.conta{
margin: 0;
width: 100vw;
height: 500px;
}
.slide{
width: 90vw;
height: 100%;
display: flex;
}
/* .slide * {display: inline-block;} */
.toleft, .toright {
width: 10%;
text-align: center;
padding-top: 4em;
cursor:pointer;
}
.toleft{float: left;}
.toright{float: right;}
.content{
width: 80%;
overflow: hidden;
white-space: nowrap;
}
.slides {
display: inline-block;
margin: 0;
width: 100%;
height: 100%;
transition:all .5s;
}
.slides img {
object-fit: cover;
width: 100%;
height: 100%;
}
/* #slide1{
transform: translateX(-100%);
z-index: 1;
} */
전체 슬라이드의 크기를 수정하기 위해서는 17, 18, 21, 22 줄을 수정해주시면 됩니다.
JavaScript 코드
const slides = document.querySelector(".slides");
const leftbtn = document.querySelector('.toleft');
const rightbtn=document.querySelector('.toright');
let slideNo = 0;
rightbtn.addEventListener("click",function goSlide(){
// 이미지가 총 6개라면 아래 4를 6으로 수정해야 합니다.
if (slideNo<4){
slideNo += 1;
//직접 슬라이드를 해보고, 사진이 오른쪽 왼쪽으로 조금씩 삐뚤어지는지 확인한 뒤
//100.7 부분의 크기를 늘이거나 줄이면 됩니다.
document.querySelector(`#slide${slideNo}`).style.transform=`translateX(${-100.7*slideNo}%)`;
}
}
);
leftbtn.addEventListener("click",function goSlide(){
if(slideNo>0){
slideNo -= 1;
const whatwillchange=document.querySelector(`#slide${slideNo+1}`).style;
whatwillchange.transform=`translateX(0%)`;
}
}
);
728x90
'자바스크립트' 카테고리의 다른 글
| 마우스의 움직임을 따라가는 요소 만들기 (0) | 2022.09.05 |
|---|---|
| 키보드 입력으로 이벤트 발생하기 [바닐라 자바스크립트] (0) | 2022.09.01 |
| 폼이 제출되기 전, 유효성 검사하기 (0) | 2022.06.13 |
| 클릭으로 html 항목을 화면에 표시 or 숨김 (0) | 2022.03.15 |
| JavaScript, 폼 값을 URL로 전달 (0) | 2022.03.15 |
댓글