JAVASCRIPT

슬라이더 이펙트 07

ture403 2023. 4. 14. 14:26

- 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>07. 슬라이드 이펙트</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="img05 bg05 font10">
    <header id="header">
        <h1>Javascript slider Effect07</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><a href="sliderEffect06.html">6</a></li>
            <li class="active"><a href="sliderEffect07.html">7</a></li>
        </ul>
    </header>
    <!-- header -->
    <main id="main">
        <div class="slider_wrap">
            <div class="slider_img"></div>
            <div class="slider_thumb"></div>
            <div class="slider_btn">
                <a href="#" class="prev" title="이전이미지">prev</a>
                <a href="#" class="next" title="다음이미지">next</a>
                
            </div>
        </div>
        
        
    </main>
    
    <!-- main -->

    <footer id="footer">
        <a href="mailto:ture403@gmail.com">ture403@gmail.com</a>
    </footer>
</body>

css 코드입니다.

/* silder_wrap */
.slider_wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50% , -50%);
    width: 800px;
    height: 450px;
    box-shadow: 0 50px 100px rgba(0,0,0,0.4);
}
.slider_img {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.slider_img img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform : scale(1.1);
    transition: all 500ms ease-in-out;
}
.slider_img img.active {
    opacity: 1;
    transform: scale(1);
}
.slider_thumb {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50% , 140px);
    width: 100px;
    display: flex;
    justify-content: center;
    gap: 10px;
}
.slider_thumb img {
    cursor: pointer;
    border: 2px solid transparent;
}
.slider_thumb img.active {
    border: 2px solid #fff;
}
.slider_btn a{
    position: absolute;
    top: 0;
    width: 40px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    background-color: rgba(0,0,0,0.2);
    transition: all 300ms ease-in-out;
    color: #fff;
}
.slider_btn a:hover {
    background-color: rgba(0,0,0,0.5);
}
.slider_btn a.next {
    right: 0;
}

 

JS코드입니다.

let images = [
    "./img/silderEffect01-1-min.jpg",
    "./img/sliderEffect07-1-min.jpg",
    "./img/sliderEffect08-1-min.jpg",
    "./img/sliderEffect09-min.jpg", 
    "./img/sliderEffect10-1-min.jpg"
];

function imageSlider(parent, images) {
    let currentIndex = 0; //현재 보이는 이미지
    // 선택자
    let slider = {
        parent : parent,
        images: parent.querySelector(".slider_img"),
        thumnails : parent.querySelector(".slider_thumb"),
        prevBtn : parent.querySelector(".slider_btn .prev"),
        nextBtn : parent.querySelector(".slider_btn .next"),
    };
    // 이미지 출력
    slider.images.innerHTML = images.map((image ,index)=>{

        return `<img src="${image}" alt="이미지${index}">`;

    }).join("")

    slider.thumnails.innerHTML = slider.images.innerHTML

    // 이미지 활성화(active) 하기
    let imageNodes = slider.images.querySelectorAll("img");
    imageNodes[currentIndex].classList.add("active");

    // 썸네일 사진 출력
    const a =slider.images;
    a.childNodes[0].classList.add("active");

    // 썸네일 활성화(active) 하기
    let thumnailNodes = slider.thumnails.querySelectorAll("img");
    thumnailNodes[currentIndex].classList.add("active");

    // 썸네일 이미지 클릭하기
    // for(let i=0; i<thumnailNodes.length; i++){
    //     thumnailNodes[i].addEventListener("click",function(){
    //         slider.thumnails.querySelector("img.active").classList.remove("active");
    //         thumnailNodes[i].classList.add("active");

    //         imageNodes[currentIndex].classList.remove("active");
    //         currentIndex = i;
    //         imageNodes[currentIndex].classList.add("active");
    //     })
    // }
    thumnailNodes.forEach((el,index) => {
        el.addEventListener("click",()=>{
            slider.thumnails.querySelector("img.active").classList.remove("active");
            el.classList.add("active");

            imageNodes[currentIndex].classList.remove("active");
            currentIndex = index;
            imageNodes[currentIndex].classList.add("active");
        })
    });

    // 왼쪽 버튼 클릭했을때
    slider.prevBtn.addEventListener("click",()=>{
        imageNodes[currentIndex].classList.remove("active");
        currentIndex--;
        //0 4 3 2 1 0 4 3 2 1 ....
        if(currentIndex < 0) currentIndex = images.length -1;
        imageNodes[currentIndex].classList.add("active");

        // 썸네일
        slider.thumnails.querySelector("img.active").classList.remove("active");
        thumnailNodes[currentIndex].classList.add("active");
    });
    // 오른쪽 버튼 클릭했을떄
    slider.nextBtn.addEventListener("click",()=>{
        imageNodes[currentIndex].classList.remove("active");
        currentIndex++;
        //1 2 3 4 0 1 2 3 4 0
        currentIndex = (currentIndex) % images.length;
        imageNodes[currentIndex].classList.add("active");

        // 썸네일
        slider.thumnails.querySelector("img.active").classList.remove("active");
        thumnailNodes[currentIndex].classList.add("active");
    });
}


imageSlider(document.querySelector(".slider_wrap"), images);

 

자바스크립트

  • 오늘은 자바스크립트 썸네일을 추가해서 만들었습니다.
  • 먼저 slider_thumb div를 만들엇습니다. 그안에 img태그를 넣어서 만들었습니다.
  • 처음 slider변수안에 img경로를 넣었습니다. 
  • 그리고 function imageSlider를 만들었습니다. 그안에 매개변수 첫번째에 parent , 2번쨰 images 를 넣었습니다. 
  • 함수 출력할때 처음 매개변수는 document.querySelector(".slider_wrap")를 넣어서 부모요소를 적용했고 2번째 매개변수는 변수에 있는 images 를 넣었습니다. 
  • 그리고 그안에 변수 slider 안에 선언자를 입력합니다. 
  • 그리고 처음에 slider 안에 images 안에 innerHTML을 써서 맵 매서드를 써서 반복을 돌려서 생성을 했습니다. 
  • 그리고 ,가 나오므로 체인으로 join을 써서 ,를 지웠습니다. 
  • 그다음 이미지 안에 있는 썸네일 화면을 클릭하면 움직이게 만들었습니다.
  • 먼저 썸네일을 반복을 돌린후 click했을떄 이벤트를 주었습니다. 먼저 img.active 가 붙을걸 찾아서 active를 지웠습니다.
  • 그다음 클릭한것을 active를 주었습니다. 그다음 img의 전체를 가져와서오는 변수 thumnailNodes 에 넣었습니다.
  • thumnailNodes[currentIndex]값을 넣어주었습니다. 그안에 classList.remove("active")를 해줍니다.
  • 그리고 currentIndex 값을 index 값을 넣어주면 add("active")를 추가해줍니다. 
  • 그다음 왼쪽버튼을 클릭했을때에 이벤트 발생문 입니다.
  • 그리고 currentIndex값을 --를 주면 1씩 빠집니다. 그리고 if문을 써서 0보다 작을때 currntIndex값을 사진의갯수뺴기1을 해주었습니다. 그리고 이미지에 active를 붙여서 닷도 활성화를 해주었습니다.
  • 반대로 오른쪽 버튼을 클릭했을때 currentIndex 값을 증가 시켜서 currentIndex 값에 사진갯수를 나눈 나머지값이 currentIndex값으로 들어갑니다. 그럼 1 2 3 4 0 이 반복이 됩니다.
  • 그다음 imageNodes에 해당하는 순번에 active를 붙여서 활성화 합니다.
  • 썸네일도 전에있던 걸 지우고 다시 활성화 시키는 코드를 작성합니다.

'JAVASCRIPT'의 다른글

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

관련글

댓글

티스토리툴바