웹디자인 기능사 실기 슬라이드효과

💜 웹디자인 기능사 실기 슬라이드효과01

코드 보기 / 완성 화면

 

 전체 코드는 위에 링크를 확인해주세요

 

첫번째는 좌로 움직이는 슬라이드입니다.

 

HTML

<div class="slider__wrap">
    <div class="slider__img">
        <div class="slider__inner">
            <div class="slider"><img src="https://hyunmijin.github.io/web2023/webd/slider/img/slider01_1.png" alt="배너"></div>
            <div class="slider"><img src="https://hyunmijin.github.io/web2023/webd/slider/img/slider01_2.png" alt="배너"></div>
            <div class="slider"><img src="https://hyunmijin.github.io/web2023/webd/slider/img/slider01_3.png" alt="배너"></div>
        </div>
    </div>
</div>

일단 이미지 부분은 slider__wrap, slider__img, slider__inner, slider로 나누어줍니다.

 

CSS

.slider__wrap {
    width: 100%;
    height: 300px;
}
.slider__img {  /* 이미지가 보이는 영역 */
    position: relative;
    width: 1200px;
    height: 300px;
    overflow: hidden;
}
.slider__inner {  /* 이미지 움직이는 영역 = 전체 이미지를 감싸고있는 부모 : 움직이는 영역 */
    display: flex;
    flex-wrap: wrap;
    width: 3600px;
    height: 300px;
}
.slider {  /* 개별적인 이미지 */
    width: 1200px;
    height: 300px;
}

CSS부분은 이렇게 이미지가 보이는 영역과 이미지가 움직이는 영역, 이미지의 개별 구역을 나누어

움직임에 맞게 css를 작업해줍니다.

 

script

<script>
    const sliderWrap = document.querySelector(".slider__wrap");
    const sliderImg = sliderWrap.querySelector(".slider__img");
    const sliderInner = sliderWrap.querySelector(".slider__inner");
    const slider = sliderWrap.querySelectorAll(".slider");

    let currentIndex = 0;
    let sliderCount = slider.length;
    let sliderIntever = 3000;

    sliderInner.style.transition = "all 0.4s";

    setInterval(() => {
        currentIndex = (currentIndex + 1) % sliderCount;

        sliderInner.style.transform = "translateX(" + -1200 * currentIndex + "px)"
    }, sliderIntever);
</script>

선택자를 만들어주고

currentIndex 변수를 0으로 초기화하고 sliderCount 변수에는 slider 클래스를 가진 요소의 개수를 할당합니다.

sliderInteval 변수에는 슬라이드가 자동으로 전환되는 시간을 할당합니다.

 

sliderInner요소의 transition속성을 all 0.4s로 설정해 이미지가 넘어갈때 자연스럽게 넘어가도록 애니메이션 효과를 줍니다.

 

setInterval()함수를 사용해 슬라이더를 자동으로 전화하는 기능을 줍니다.

일정한 시간 간격으로 특정한 코드를 실행합니다.

currentIndex변수를 1씩 증가시키고 sliderCount로 나눈 나머지 값을 currentIndex 에 할당합니다.

이를 통해 슬라이드의 마지막 요소에 도달하면 다시 첫 번째 요소로 돌아갑니다.

 

마지막으로 sliderInner요소에 transform 속성을 이용해 현재 인덱스에 맞는 슬라이드를 보여주는 기능을 구현합니다.

currentIndex 를 이용해 -1200 *currentIndex 픽셀 만큼 슬라이드를 이동해줍니다.

 

 

💜 웹디자인 기능사 실기 슬라이드효과02

코드 보기 / 완성 화면

 

2번째는 위로 슬라이드 되는 방식입니다.

 

CSS

.slider__wrap {
    width: 100%;
    height: 300px;
}
.slider__img {  /* 이미지가 보이는 영역 */
    position: relative;
    width: 1200px;
    height: 300px;
    overflow: hidden;
}
.slider__inner {  /* 이미지 움직이는 영역 = 전체 이미지를 감싸고있는 부모 : 움직이는 영역 */
    /* display: flex;
    flex-wrap: wrap; */
    width: 1200px;
    height: 900px;
}
.slider {  /* 개별적인 이미지 */
    width: 1200px;
    height: 300px;
}

css에서만 width 값과 height값만 맞게 고쳐줍니다.

 

script

const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = sliderWrap.querySelector(".slider__img");
const sliderInner = sliderWrap.querySelector(".slider__inner");
const slider = sliderWrap.querySelectorAll(".slider");

let currentIndex = 0;
let sliderCount = slider.length;
let sliderIntever = 3000;

sliderInner.style.transition = "all 0.4s";

setInterval(() => {
    currentIndex = (currentIndex + 1) % sliderCount;

    sliderInner.style.transform = "translateY(" + -300 * currentIndex + "px)"
}, sliderIntever);

이미지 움직이는 영역을 세로로 움직이게 Y값으로 바꿔줍니다.

 

 

 

💜 웹디자인 기능사 실기 슬라이드효과03

코드 보기 / 완성 화면

 

마지막으로 위로 슬라이드 되는 방식입니다.

 

script

const slider = document.querySelectorAll(".slider");
const sliderImg = document.querySelector(".slider__inner");
let index = 0;
let sliderIndex = 0;
sliderImg.style.transition = "all 0.6s";
sliderImg.style.transform = "translateY(" + (-300) + "px)"; // 초기값 설정
setInterval(() => {
    sliderIndex = (index % slider.length) + 4;
    if (sliderIndex == 0) {
        sliderImg.style.transform = "translateY(" + (-300) + "px)"; // 0이면 처음으로 돌아가기
    }
    sliderImg.style.transform = "translateY(" + (-3600 + (300 * sliderIndex)) + "px)"; //계산해서 -이동
    index++;
}, 1000);

setInterval() 함수를 사용해 일정 시간 간격으로 슬라이드를 자동으로 전환하는 기능을 구현합니다.

이때, sliderIndex변수를 계산해 슬라이드 이미지를 이동시키고

sliderIndex는 index 변수를 slider.length로 나눈 나머지에 4를 더한 값입니다.

이를 통해 슬라이드가 반복되면서 이미지를 순서대로 보여줍니다.

 

그래고 sliderIndex값에 따라 sliderImg 요소의 transform 속성을 변경해 이미지를 이동시켜줍니다.