라우드 이미지 슬라이드 부분을 따라했다.

틀

    <div id="slide">
        <div class="slider-container">
            <span class="leftBtn">
                <i class="fa-solid fa-chevron-left"></i>
            </span>
            <div class="slider">
                <span class="first-img">
                    <div class="text-wrap">
                        <h5>WEEKLY DESIGN</h5>
                        <h1>사용자가 좋아하는 디자인, WEB/APP 디자인</h1>
                        <h4>WEB/APP 바로가기 ></h4>
                    </div>
                    <img src="4.png" alt="0" />
                </span>
                <span>
                    <div class="text-wrap">
                        <h5>LOUDSOURCING</h5>
                        <h1>디자인부터 아이디어까지, &nbsp; 19만 전문가에게 의뢰하세요</h1>
                        <h4>콘테스트 개최하기 ></h4>
                    </div>
                    <img src="1.png" alt="1" />
                </span>
                <span>
                    <div class="text-wrap">
                        <h5>WEEKLY DESIGN</h5>
                        <h1>디자인 트렌드는 라우드소싱 2022 로고/BI 디자인</h1>
                        <h4>로고/BI 바로가기 ></h4>
                    </div>
                    <img src="2" alt="2" />
                </span>
                <span>
                    <div class="text-wrap">
                        <h5>WEEKLY DESIGN</h5>
                        <h1>사용자가 좋아하는 디자인, WEB/APP 디자인</h1>
                        <h4>WEB/APP 바로가기 ></h4>
                    </div>
                    <img src="3" alt="3" />
                </span>
                <span class="last-img">
                    <div class="text-wrap">
                        <h5>LOUDSOURCING</h5>
                        <h1>디자인부터 아이디어까지, &nbsp; 19만 전문가에게 의뢰하세요</h1>
                        <h4>콘테스트 개최하기 ></h4>
                    </div>
                    <img src="1.png" alt="4" />
                </span>
            </div>
            <span class="rightBtn">
                <i class="fa-solid fa-chevron-right"></i>
            </span>
        </div>
    </div>

이미지가 총 3개 1-3 이 있다면 3뒤에는 1, 1뒤에는 3이 오게해서 총 5개로 코드를 짠다.

css

#slide {
    width:100%;
    padding: 0 15vw;
    position: relative;
    margin:1vw 0 0 0;
}

#slide i{
    font-size: 30px;
}

#slide .slider-container {
    width: 100%;
    overflow: hidden;
    border-radius: 15px;
}

#slide .slider-container span{
    position: absolute;
    z-index: 99;
    top:50%;
    cursor: pointer;
}

#slide .slider-container .leftBtn{
    left: 12%;
    transform: translate(0,-50%);
}

#slide .slider-container .rightBtn{
    right: 12%;
    transform: translate(0,-50%);
}

#slide .slider-container .slider{
    display:flex;
    width: 101%;
}

#slide .slider-container .slider span{
    display: block;
    position: relative;
    min-width: 100%;
}

#slide .slider-container .slider span .text-wrap{
    position: absolute;
    top:50%;
    left:5%;
    transform:translate(0,-50%);
    width:29%;
    color:#fff;
}

#slide .slider-container .slider span .text-wrap h1{
    line-height: 140%;
    font-size: 33px;
}

#slide .slider-container .slider span .text-wrap h4{
    font-size: 13px;
    margin:30px 0 0 0;
}

#slide .slider-container .slider span .text-wrap h5{
    line-height: 140%;
    font-size: 12px;
    letter-spacing: 1px;
    margin:0 0 10px 0;
}

app.js

const images = document.querySelectorAll('.slider span');
const sliderContainer = document.querySelector('slider-container');
const slider = document.querySelector('.slider');
const prevBtn = document.querySelector('.leftBtn');
const nextBtn = document.querySelector('.rightBtn');

let current = 1;
const imgSize = images[0].clientWidth;

slider.style.transform = `translateX(${-imgSize}px)`;

prevBtn.addEventListener('click',()=>{
    if( current <= 0) return;
    slider.style.transition = '400ms ease-in-out transform';
    current--;
    slider.style.transform = `translateX(${-imgSize * current}px)`;
})

nextBtn.addEventListener('click',()=>{
    if( current >= images.length -1 ) return;
    slider.style.transition = '400ms ease-in-out transform';
    current++;
    slider.style.transform = `translateX(${-imgSize * current}px)`;
})

slider.addEventListener('transitionend', ()=> {
    if(images[current].classList.contains('first-img')){
        slider.style.transition = 'none';
        current = images.length - 2;
        slider.style.transform = `translateX(${-imgSize * current}px)`;
    }
    if(images[current].classList.contains('last-img')){
        slider.style.transition = 'none';
        current = images.length - current;
        slider.style.transform = `translateX(${-imgSize * current}px)`;
    }
})

transitionend
CSS transition 이 완료되면 발생한다. transition 속성이 제거되거나 display가 none으로 설정된 경우와 같이 완료 전에 transition이 제거된 경우에는 이벤트가 생성되지 않는다.

하단바

하단바까지 구현 한 모습

index.html

<ul class="pagination">
  <li class="active" data-index="1"></li>
  <li data-index="2"></li>
  <li data-index="3"></li>
</ul>

style.css

.pagination{
    display:flex;
    position: absolute;
    bottom:60px;
    left:18.5%;
    z-index: 99;
}

.pagination li{
    width:60px;
    height:2px;
    background:#fff;
}

.pagination .active{
    background:#000;
}

app.js

const dots = document.querySelectorAll('.slider-container ul li')

prevBtn.addEventListener('click',()=>{
    for(let i=0; i < dots.length; i++) {
        if(dots[i].dataset.index == current){
            dots[i].classList.add('active');
        }else if(current === 0){
            dots[i].classList.remove('active');
            dots[2].classList.add('active');
        }
        else{
            dots[i].classList.remove('active');
        }
    }
})

nextBtn.addEventListener('click',()=>{
    for(let i=0; i < dots.length; i++) {
        if(dots[i].dataset.index == current){
            dots[i].classList.add('active');
        }else if(current === 4){
            dots[i].classList.remove('active');
            dots[0].classList.add('active');
        }
        else{
            dots[i].classList.remove('active');
        }
    }
})

이런 식으로 넣었는데 야매 그 잡채

자동 슬라이드

const next = () => {
    if (current >= images.length - 1) return;
    slider.style.transition = '400ms ease-in-out transform';
    current++;
    slider.style.transform = `translateX(${-imgSize * current}px)`;

    for (let i = 0; i < dots.length; i++) {
        if (dots[i].dataset.index == current) {
            dots[i].classList.add('active');
        } else if (current === 4) {
            dots[i].classList.remove('active');
            dots[0].classList.add('active');
        }
        else {
            dots[i].classList.remove('active');
        }
    }
}

setInterval(next, 2000);

nextBtn.addEventListener('click', () => {
    next()
})

이렇게 바꿔주면 된다.

마우스 올리면 멈춤

let auto = setInterval(next, 1000);

slider.addEventListener('mouseleave', ()=>{
    auto = setInterval(next, 1000)
})

slider.addEventListener('mouseenter', ()=>{
    clearInterval(auto)
})

위 setInterval을 삭제 후에 이것을 하단에 넣어주면 됨