[Web] 웹페이지 위아래로 움직이는 이미지 슬라이드 구현 방법

 웹페이지에서 위아래로 움직이는 이미지 슬라이드 구현 방법을 알아봅니다.

 

[ Contents ]

 

 

1. HTML

<div class="slides">
            <ul class="container">
                <li class="slide">
                    <a href="#">
                        <img src="images/img1.jpg" alt="이미지1">
                        <h2>이미지1</h2>
                    </a>
                </li>
                <li class="slide">
                    <a href="#">
                        <img src="images/img2.jpg" alt="이미지2">
                        <h2>이미지2</h2>
                    </a>
                </li>
                <li class="slide">
                    <a href="#">
                        <img src="images/img3.jpg" alt="이미지3">
                        <h2>이미지3</h2>
                    </a>
                </li>
            </ul>
        </div>

 

 쇼핑몰이나 회사 홈페이지에서 자주 볼 수 있는 이미지 슬라이드를 구현해봅니다.

 이미지 슬라이드는 3초마다 이미지 3개가 번갈아가며 나오도록 만들 겁니다.

 

 ul 태그가 container가 되고, li 태그 안에 이미지를 넣어 slide를 만듭니다.

 HTML에서는 위처럼 세로로 쌓은 형태가 됩니다.

 

 

2. CSS

/* slides */
.slides{
    height: 300px;
    overflow: hidden;   /* 밖으로 나간 요소는 숨김 처리 */
}

.slides > ul {
    height: 900px;
}

.slide {
    width: 1200px;
    height: 300px;
    position: relative; /* 기준점 */
}

.slide h2{
    position: absolute; /* slide 기준점에서 가운데 배치 */
    left: 50%;
    top: 50%;   
    transform: translate(-50%, -50%);   /* 슬라이드 정가운데 배치 */
    background: rgba(0,0,0,.2);
    padding: 10px 25px;
    color: #fff;
}

 css에서 전체 높이를 이미지 한 개 높이인 300px로 제한해줍니다.

 넘친 부분은 overflow: hidden 속성을 이용해서 잘라 버리면, 최상단 이미지만 노출되게 됩니다.

 h2부분은 이미지 중앙에 제목이 출력되도록 하는 css인데, 제목이 없다면 안 넣으셔도 무관합니다.

 

반응형

 

3. Java Script

// 슬라이드 기능
let slideContainer = $('.container');
let slide = slideContainer.find('.slide');
let slideCount = slide.length;
let currentIdx = 0;

function autoSlide(){
    setInterval(function(){
        let nextIdx = (currentIdx+1)%slideCount;
        slideContainer.animate({marginTop:-300*nextIdx+'px'});
        currentIdx = nextIdx;
    }, 3000)
}
autoSlide();

 

 이미지가 3초마다 돌아가며 슬라이딩하는 자바스크립트 코드를 짭니다.

 먼저 container 객체와 slide 객체를 각각 변수로 설정하고, animate를 이용해서 marginTop 속성 변경합니다.

 1번 이미지는 marginTop: 0px, 2번 이미지는 marginTop: -300px, 3번 이미지는 marginTop: -600px를 줘서 보이게 만들죠.

 

 이와 비슷하게 좌우 슬라이드는 양옆으로 이미지를 배치하여, marginLeft를 조정할 뿐입니다.

 다음에는 좌우 슬라이드도 알아봅니다.