JAVASCRIPT

슬라이더 이펙트 06

ture403 2023. 4. 13. 08:30

- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형

완성된 화면 입니다.

 

HTML 화면입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="view-transition" content="same-origin">
    <title>06. 슬라이드 이펙트</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/slider.css">
    <!-- GSAP -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
</head>
<body class="img10 bg10 font10">
    <header id="header">
        <h1>Javascript slider Effect06</h1>
        <p>슬라이드 이펙트 - 이미지 슬라이드(버튼,닷메뉴)</p>
        <ul>
            <li><a href="sliderEffect01.html">1</a></li>
            <li><a href="sliderEffect02.html">2</a></li>
            <li><a href="sliderEffect03.html">3</a></li>
            <li><a href="sliderEffect04.html">4</a></li>
            <li><a href="sliderEffect05.html">5</a></li>
            <li class="active"><a href="sliderEffect06.html">6</a></li>
        </ul>
    </header>
    <!-- header -->
    <main id="main">
        <div class="slider_wrap">
            <div class="slider_img">
                <div class="slider_inner">
                    <div class="slider s1"><img src="./img/silderEffect01-1-min.jpg" alt="이미지1"></div>
                    <div class="slider s2"><img src="./img/sliderEffect02-1-min.jpg" alt="이미지2"></div>
                    <div class="slider s3"><img src="./img/sliderEffect03-1-min.jpg" alt="이미지3"></div>
                    <div class="slider s4"><img src="./img/sliderEffect04-min.jpg" alt="이미지4"></div>
                    <div class="slider s5"><img src="./img/sliderEffect05-1-min.jpg" alt="이미지5"></div>
                </div>
            </div>
        </div>
        <div class="slider_btn">
            <a href="#" class="prev" title="이전이미지"></a>
            <a href="#" class="next" title="다음이미지"></a>
            
        </div>
        <div class="slider_dot">
            <!-- <a href="#" class="active dot">이미지1</a> -->
            <!-- <a href="#" class="dot">이미지2</a>
            <a href="#" class="dot">이미지3</a>
            <a href="#" class="dot">이미지4</a>
            <a href="#" class="dot">이미지5</a> -->
        </div>
    </main>
</body>

css 코드입니다.

/* silder_wrap */
.slider_wrap {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.slider_img { /* 이미지가 보이는 영역 */
    position: relative;
    width: 800px;
    height: 520px;
    overflow: hidden;
}

.slider_inner { /* 전체 이미지를 감싸고 있는 부모박스 : 움직이는 영역 */
    display: flex;
    flex-wrap: wrap;
    width: 4800px;
    height: 520px;
}
.slider { /* 개별적인 이미지 */
    position: relative;
    width: 800px;
    height: 520px;
}
.slider_btn a {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    /* background: rgb(176, 201, 118); */
    transition: all 0.3s ease;
}
.slider_btn a:hover {
    border-radius: 50%;
    /* background-color: rgb(151, 180, 83); */
    color: #fff;
    scale: 2;
} 
.slider_btn a.prev {
    left: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}
.slider_btn a.next {
    right: 0;
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}
.slider_dot {
    position: absolute;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
}
.slider_dot .dot {
    width: 20px;
    height: 20px;
    background-color: rgba(255, 255, 255,0.3);
    display: inline-block;
    border-radius: 50%;
    text-indent: -9999px;
    transition: all 0.3s;
    margin:3px;
}
.slider_dot .dot.active {
    background-color: #fff
}

 

JS코드입니다.

// 선택자
const sliderWrap = document.querySelector(".slider_wrap");
const sliderImg = sliderWrap.querySelector(".slider_img");
const sliderInner = sliderWrap.querySelector(".slider_inner")
const slider = sliderWrap.querySelectorAll(".slider");
const sliderDot =document.querySelector(".slider_dot");
const sliderBtn = document.querySelectorAll(".slider_btn a");


let currentIndex = 0; //현재 보이는 이미지
let sliderCount = slider.length; //전체 이미지 갯수
let sliderInterval = 3000; //이미지 변경되는 간격 시간
let sliderWidth = slider[0].offsetWidth; //이미지 가로값
let dotIndex ="";

function init(){
    //이미지 갯수만큼 닷 메뉴 생성
    slider.forEach(()=>{
        dotIndex += "<a href='#' class='dot'>이미지1</a>";
        sliderDot.innerHTML = dotIndex;

        sliderDot.firstChild.classList.add("active");

    });
}

init();

//이미지 이동시키기
function gotoslider(num){
    sliderInner.style.transition = "all 400ms";
    sliderInner.style.transform = "translateX("+ -sliderWidth * num +"px)";
    currentIndex = num

    let dotActive = document.querySelectorAll(".slider_dot .dot");
        dotActive.forEach((el)=>{
            el.classList.remove("active");
        });
    dotActive[num].classList.add("active");
}

//버튼 클릭 했을때
sliderBtn.forEach((btn, index)=>{
    btn.addEventListener("click",()=>{
        let prevIndex = (currentIndex+(sliderCount-1)) % sliderCount; //43210
        let nextIndex = (currentIndex+1) % sliderCount; //123401234

        if(btn.classList.contains("prev")){
            gotoslider(prevIndex);
        } else {
            gotoslider(nextIndex);
        }
    });

})

function dotclick(num){
    let dotActive = document.querySelectorAll(".slider_dot .dot");

    dotActive.forEach((el,index)=>{
        el.addEventListener("click",()=>{
            gotoslider(index);
        });

    })
}
dotclick();

 

자바스크립트

  • 선언자를 전일아 동일합니다.
  • 함수는 init,gotoslider,dotclick으로 작성했습니다.
  • 먼저 init 함수는 이미지 갯수만큼 닷 메뉴를 생성한는 함수입니다. slider안에 forEach문을 써서 slider 갯수 만큼 dotindex를 innerHTML 로 표출해주고 있습니다. 첫번째 dot메뉴에다가 active를 붙여 줬습니다.
  • 다음 gotoslider 함수입니다. prev 나 next 를 클릭했을떄 그안에 이벤트(이미지이동)를 발생할 함수입니다.
  • 먼저 매개변수 num을 설정합니다. 이 매개변수로 값을 할당 받아서 안에 식을 동작하게 할겁니다.
  • 먼저 sliderInner에 style을 주었습니다. sliderInner는 이미지의 부모박스입니다. 이걸 토대로 움직이면 슬라이드 효과를 줄수 있습니다. 
  • style은 trasition 과 transform 입니다. transform 에 trasnlateX 값을 옮겨주면 되니까 넓이가 800 이므로 -800씩 추가적으로 움직이면 화면이 넘어가는 형태로 보여지게 될것입니다. translateX값을 -800에다가 매개변수값을 곱해주면 나오게 처리 했습니다. 그리고 변수에 dot을 담은뒤 next나 prev를 클릭할때 마다 dot에 활성상태가 변하게 처리했습니다.
  • 먼저 변수 dotActive를 forEach로 반복을 돌린 후 그안에 active를 다 지웠습니다. 그후 dotActive.clasList.add를 써서 엑티브를 활성화 시켰습니다.
  • 다음 함수는 dotClick 입니다. dot을 클릭했을때 화면이 움직이고 dot에 active도 활성화 해야 합니다.  일단 dotActive를 위에서 가져왔습니다. 그후 forEach를 써서 반복을 할겁니다. 그안에 gotoslider(num)값을 넣으면 정상동작이 될겁니다.
  • 이제 양옆 버튼을 클릭했을때 입니다.
  • sliderBtn에는 a링크 2개가 들어가 있습니다. 바로 next prev 입니다.
  • sliderBtn를 forEach로 반복을 돌려서 그안에 prev class가 있으면 아까 만들었던 함수 goslider를 출력합니다.
  • 그게 아니면(next) gotoSlider를 출력합니다. 안에 매개변수는 다르게 적용할것입니다.
  • 변수 prevIndex 는 4321043210으로 출력이 되게 설정을 했습니다. %는 나머지 값이므로 전에 봤던 코드와 동일합니다.
  • 변수 nextIndex 는 1234012340으로 출력이 되게 설정을 했습니다. %는 나머지 값이므로 전에 봤던 코드와 동일합니다.
  • 그러면 이제 gotsilder()괄호 안에 원하는 변수를 넣어주면 됩니다.

'JAVASCRIPT'의 다른글

  • 현재글슬라이더 이펙트 06

관련글

댓글

티스토리툴바