슬라이드 이펙트06_버튼, 닷메뉴

이미지를 여러개 배치하여 움직이게 하며 연속으로 아래에서 로 지나가는 슬라이드 이펙트를 만들어 보도록 합니다.

어제 올린 1,2,3,4,5번도 마찬가지지만 gsap과 jqurey를 활용하여 세가지 방법을 사용하였습니다. 

모두 올리니 차이점을 확인해 보시길 바랍니다

---

HTML

<header id="header">
    <h1>Javascript slider Effect06</h1>
    <p>슬라이드 이펙트06 : 이미지 슬라이드(버튼, 닷메뉴)</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>
        <li><a href="sliderEffect07.html">7</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/Effect_bg06-min.jpg" alt="이미지 1"></div>
                <div class="slider s2"><img src="./img/Effect_bg01-min.jpg" alt="이미지 2"></div>
                <div class="slider s3"><img src="./img/Effect_bg03-min.jpg" alt="이미지 3"></div>
                <div class="slider s4"><img src="./img/Effect_bg07-min.jpg" alt="이미지 4"></div>
                <div class="slider s5"><img src="./img/Effect_bg08-min.jpg" alt="이미지 5"></div>
            </div>
        </div>
        <div class="slider__btn">
            <a href="#" class="prev" title="이전이미지">prev</a>
            <a href="#" class="next" title="다음이미지">next</a>
        </div>
        <div class="slider__dot">
            <!-- <a href="#" class="dot active">이미지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>
    </div>
</main>
<!-- //main -->

<footer id="footer">
    <a href="mailto:jo0132@naver.com">jo0132@naver.com</a>
</footer>
<!-- //footer -->

헤더 부분에는 제목과 설명이 포함된 h1, p, 그리고 ul 태그가 있습니다. ul 태그 안에는 이미지 슬라이드의 다른 페이지로 연결되는 링크가 포함되어 있습니다.
메인 부분에는 이미지 슬라이드가 표시되는 영역이 구성되어 있습니다. slider__img와 slider__btn, slider__dot 클래스를 가지는 div 태그가 있습니다. slider__img 클래스는 이미지를 감싸는 래퍼(wrapper) 역할을 하며, slider__btn 클래스는 이전/다음 이미지로 이동하는 버튼을 포함하고 있습니다. slider__dot 클래스는 이미지의 위치를 나타내는 도트 메뉴를 포함하고 있습니다.
이미지 슬라이드 영역에는 5개의 이미지가 있는데, 각각의 이미지는 slider 클래스와 s1, s2, s3, s4, s5 클래스를 가지는 div 태그로 구성되어 있습니다. 이미지는 img 태그를 사용하여 소스 파일 경로와 대체 텍스트를 설정하고 있습니다.
푸터 부분에는 이메일 주소를 가지고 있는 a 태그가 있습니다.

 

---

CSS

/* slider__wrap */
.slider__wrap {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.slider__img {  /* 이미지가 보이는 영역 */
    position: relative;
    width: 800px;
    height: 450px;
    overflow: hidden;
}
.slider__inner {    /* 전체 이미지를 감싸고 있는 부모 : 움직이는영역 */
    display: flex;
    flex-wrap: wrap;
    width: 4800px;
    height: 450px;
}
.slider{    /* 개별적인 이미지 */
    position: relative;
    width: 800px;
    height: 450px;
}
.slider__btn a {
    position: absolute;
    top: 50%;
    transform:translateY(-50%);
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #fff;
    transition: all 0.6s;
}
.slider__btn a:hover {
    border-radius: 50%;
    background-color: rgb(39, 107, 255);
    color: #fff;
}
.slider__btn a.prev {
    left: 0;
}
.slider__btn a.next {
    right: 0;
}
.slider__dot {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
}
.slider__dot .dot{
    width: 20px;
    height: 20px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: inline-block;
    text-indent: -9999px;
    transition: all 0.3s;
    margin: 3px;
}
.slider__dot .dot.active {
    background-color: rgba(255, 255, 255, 1);
}

• .slider__wrap: 슬라이드를 감싸는 부모 요소로, 전체 화면 높이(100vh)에 가운데 정렬되고, 내부의 요소들이 가로 정렬되도록 설정되어 있습니다.
• .slider__img: 이미지가 보이는 영역으로, 높이와 너비가 고정되어 있고, 내부의 이미지들이 overflow:hidden 속성을 통해 넘치지 않도록 설정되어 있습니다.
• .slider__inner: 이미지들을 감싸는 부모 요소로, 내부의 이미지들이 가로로 나열되도록 설정되어 있습니다.
• .slider: 개별 이미지를 나타내는 클래스로, 각 이미지의 크기와 위치를 조정하는 역할을 합니다.
• .slider__btn a: 이전/다음 버튼을 나타내는 클래스로, 위치와 스타일을 설정하여 이미지 슬라이드를 이동할 수 있는 버튼을 생성합니다. hover 시에 배경색과 글자색이 변경되는 애니메이션 효과가 설정되어 있습니다.
• .slider__dot: 이미지 위치를 나타내는 도트 메뉴를 나타내는 클래스로, 가운데 정렬된 위치에 도트들이 나열되도록 설정되어 있습니다.
• .slider__dot .dot: 개별 도트를 나타내는 클래스로, 크기와 배경색, 여백 등의 스타일이 설정되어 있습니다. active 클래스가 추가되면 배경색이 변경되는 효과가 적용됩니다.

---

JAVASCRIPT

<script>
    const sliderWrap = document.querySelector(".slider__wrap");         
    const sliderImg = sliderWrap.querySelector(".slider__img");             //
    const sliderInner = sliderWrap.querySelector(".slider__inner");
    const slider = sliderWrap.querySelectorAll(".slider");                  // slider를 배열로 받으므로 하나하나 선택할경우 배열로 선택 가능하다.
    const sliderDot = sliderWrap.querySelector(".slider__dot");             // 닷메뉴
    const sliderBtn = sliderWrap.querySelectorAll(".slider__btn a");        //버튼

    let currentIndex = 0;                                                   // 현재 보이는 이미지
    let sliderCount = slider.length;                                        //이미지 갯수
    let sliderWidth = slider[0].offsetWidth;                                //이미지 가로값
    let sliderInterval = 2000;
    let dotIndex = "";


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

        //첫번재 닷 메누한테 활성화 표시하기
        sliderDot.firstChild.classList.add("active");
    }
    init();

    let dotActive = document.querySelectorAll(".slider__dot .dot");

    //닷을 누르면 이미지 넘어가기
    dotActive.forEach((el,i) => {
        el.addEventListener("click",function(){
            sliderDot.querySelector(".dot.active").classList.remove("active");
            el.classList.add("active");
            gotoSlider(i);
        });
    });

    //이미지 이동시키기
    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((active) => active.classList.remove("active"));
        dotActive[num].classList.add("active");

    }


    //버튼을 클릭했을 때
    sliderBtn.forEach((btn, index) => {
        btn.addEventListener("click",() =>{
            let prevIndex = (currentIndex + (sliderCount-1)) % sliderCount;
            let nextIndex = (currentIndex + 1) % sliderCount; //123401234
            console.log(prevIndex)
            if(btn.classList.contains("prev")){
                gotoSlider(prevIndex);
            }else{
                gotoSlider(nextIndex);
            }
        });
    });

</script>

• 이미지 슬라이더의 초기화: init() 함수가 호출되면, 이미지 슬라이더의 갯수에 따라 닷 메뉴를 생성하고, 첫 번째 닷 메뉴를 활성화 상태로 표시합니다.
• 닷 메뉴 클릭 시 이미지 전환: dotActive 변수에 닷 메뉴 요소들을 저장하고, forEach 루프를 통해 각각의 닷 메뉴에 클릭 이벤트를 추가합니다. 클릭 시, 현재 활성화된 닷 메뉴의 클래스를 제거하고, 클릭한 닷 메뉴에 active 클래스를 추가하며, gotoSlider() 함수를 호출하여 해당 인덱스의 이미지로 슬라이드를 이동합니다.
• 이미지 이동: gotoSlider() 함수는 인덱스를 입력받아, 해당 인덱스의 이미지로 슬라이드를 이동하는 역할을 합니다. 이를 위해, sliderInner 요소의 CSS 속성을 변경하여 이미지를 가로로 이동시킵니다. 또한, 현재 활성화된 닷 메뉴를 업데이트하고, 현재 인덱스를 저장합니다.
• 이전/다음 버튼 클릭 시 이미지 전환: sliderBtn 변수에 이전/다음 버튼 요소들을 저장하고, forEach 루프를 통해 각각의 버튼에 클릭 이벤트를 추가합니다. 클릭 시, 현재 인덱스를 기반으로 이전 또는 다음 인덱스를 계산하고, gotoSlider() 함수를 호출하여 해당 인덱스의 이미지로 슬라이드를 이동합니다.

---