본문 바로가기
자바스크립트

슬라이드 이미지 만들기

by zenna 2022. 6. 15.

 

아래와 같은 이미지 슬라이드를 만들어보겠습니다. 

css와 자바스크립트를 활용합니다.

 

 

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

관련글

댓글

티스토리툴바