이번 예제에서는
자바스크립트만을 활용한 이미지 슬라이더를 만들어보겠습니다.
먼저, 스틱코드에 올라온 이미지 슬라이더 코드를 즐겨찾기 추가해주세요.
<main.html>
먼저 html 코드를 작성해봅시다.
html 파일에서 스틱코드 호출태그인 jsImageSlideHTML을 입력하면
자바스크립트 이미지 슬라이드의 HTML 코드가 자동완성됩니다.
이제 호출된 코드 내에 필요한 값을 입력해줍니다.
여기서는 <img src=""> 부분에 이미지 슬라이더에 들어갈 이미지의 주소값을 넣어주고,
이전 버튼과, 다음 버튼에 들어갈 문구를 작성해줍니다.
하단은 완성된 html 코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="main.css">
<title>스틱코드(stickode.com)</title>
</head>
<body>
<div class="container">
<div class="album">
<div class="images">
<img src="stickode1.jpg">
<img src="stickode2.jpg">
<img src="stickode3.jpg">
<img src="stickode4.png">
</div>
</div>
<button class="previous">←</button>
<button class="next">→</button>
</div>
<script src="main.js">
</script>
</body>
</html><main.css>
다음으로 html 코드에 맞추어 css 코드를 작성해줍니다.
이전과 마찬가지로 css 파일에서 스틱코드 호출태그인 jsImageSlideCSS를 입력하면
자바스크립트 이미지 슬라이드의 CSS 코드가 자동완성됩니다.
이제 호출된 코드 내에서 수정하고 싶은 부분을 수정해줍니다.
자동완성된 코드는 너비가 370px인 이미지로 구성된 슬라이더를 위해 값이 지정되어 있습니다.
이미지의 너비는 원하는 값만큼 입력해주면 됩니다.
button, button:active, button:focus는 버튼이 클릭가능한 상태일 때의 css를 지정하는 것이고,
button:disabled는 버튼이 클릭할 수 없는 상태일 때의 css를 지정하는 것입니다.
저는 버튼의 색상을 변경하고, 버튼의 속성값을 조금 바꿔보았습니다.
하단은 완성된 css 코드입니다.
.container{
width: 370px;
margin: 0 auto;
}
.album{
width: 370px;
height: 250px;
overflow: hidden;
}
.images{
position: relative;
display: flex;
height: 250px;
}
img{
width: 370px;
height: 250px;
}
button, button:active, button:focus{
width: 180px;
height: 25px;
background-color: pink;
outline: none;
border: none;
}
button:disabled{
background-color: gainsboro;
}
.prev{
float: left;
}
.next{
float: right;
}<main.js>
마지막으로, 자바스크립트를 이용해서 버튼의 클릭에 따라 이전과 다음 이미지가 보이도록 만들어줍니다.
이전과 마찬가지로 js 파일에서 스틱코드 호출태그인 jsImageSlideJS를 입력하면
자바스크립트 이미지 슬라이드의 JS 코드가 자동완성됩니다.
IMAGE_WIDTH는 CSS에서 지정한 width 값과 동일하게 수정해줍니다.
이전 버튼을 클릭하면 previous() 함수가 호출이 되고,
다음 버튼을 클릭하면 next() 함수가 호출됩니다.
<완성된 화면>
하단에 있는 버튼을 누르면, 이전/다음 이미지를 볼 수 있는 걸 확인할 수 있습니다.
참고한 스틱코드
자바스크립트로 이미지 슬라이더 구현 > stickode.com/detail.html?no=2091
스틱코드
stickode.com
'JavaScript' 카테고리의 다른 글
| [JavaScript] JSON 데이터 사용해보기 (0) | 2021.06.01 |
|---|---|
| [JavaScript] 태그 추가 삭제 기능 빠르게 구현하기 (5) | 2021.05.28 |
| [JavaScript] 배경 색상 변경시키기 (0) | 2021.05.20 |
| [JavaScript] 애니메이션 구현하기 (anime.js 사용) (0) | 2021.05.19 |
| [JavaScript] 모달창 빨리 만들기 (0) | 2021.05.05 |
