캐러셀(Carousel) 이미지슬라이드 만들기

<div style="overflow: hidden; position: relative;">
      
      <div class="slide-container">
        	<div class="slide-box img1">
          		<!-- <img src="/img/product1-1.jpg" alt=""> -->
        	</div>
        	<div class="slide-box img2">
          		<!-- <img src="/img/product2.jpg" alt=""> -->
       		</div>
        	<div class="slide-box img3">
          		<!-- <img src="/img/product3.jpg" alt=""> -->
        	</div>
      </div>
      		<button id="prev" class="prev btn-primary">&lang;</button>
		<button id="next" class="next btn-primary">&rang;</button>
      		<div style="clear: both;"></div>
</div>

이런 식으로, 전체 컨테이너에 overflow: hidden 을 주고 슬라이드에 사용할 이미지를 HTML에 넣던, css에 배경으로 넣든 넣어서 슬라이드container엔 300vw라는 뷰포트의 300%를 주고 개별 슬라이드box엔 100vw를 주고  float로 가로배치하면

이렇게 되며, overflow에 의해 나머지 2개가 화면에서 보이지 않게 된다.

앞으로 뒤로 버튼을 만든 후, position: absolute를 이용해 right: 0; left: 0;을 각각 주어 양옆에 배치시킨다.

 

.slide-box {
    width: 100vw;
    height: 600px;
    float: left;
}
.img1 {
    background-image: url(/img/product1-1.jpg);
    background-repeat: no-repeat;
}
.img2 {
    background-image: url(/img/product2.jpg);
    background-repeat: no-repeat;
}
.img3 {
    background-image: url(/img/product3.jpg);
    background-repeat: no-repeat;
}
.slide-container {
    width: 300vw;
}
.transforming {
    transition: transform 0.5s;
}
.prev {
    position: absolute;
    top: 45%;
    left: 0;
}
.next {
    position: absolute;
    top: 45%;
    right: 0;
}

위와 같이 css를 준 후,

var nowimg = 1;

$('#next').click(function() {
	if (nowimg < 3) {
		$('.slide-container').css('transform', 'translateX(-'+nowimg+'00vw)');
			nowimg += 1;
        }
});
        
$('#prev').click(function() {
	if (nowimg > 1) {
		$('.slide-container').css('transform', 'translateX(-'+(nowimg-2)+'00vw)');
			nowimg -= 1;
        }
});

이렇게 자바스크립트를 짜준다. 먼저, 현재 내가 보고있는 이미지 변수를 1이라고 선언하자.

그런 다음, #next버튼을 클릭하면, 만약 변수가 3보다 작을 때 (현재 이미지 개수가 3개이고 마지막 이미지까지 가면 더이상 넘어가지 않게 하기 위해서) 슬라이드container 자체가 -100vw씩 움직이고, nowimg 변수가 1을 더해서 2가 되게끔 된다. 그 다음에 또 누르면 변수가 2 이므로 이번엔 -200vw만큼 움직이고 변수가 3이되므로 이젠 눌러도 실행되지 않는다.

#prev버튼을 클릭하면 변수가 1보다 클 때 (첫 번째 이미지에서 뒤로가면 안되기 때문에) 만약, 현재 이미지가 2번째라 하면, -0vw 즉, 처음으로 돌아가게 된다. 

이런 식으로, 캐러셀을 직접 만들 수 있다. 하지만 여러 라이브러리가 있으니 찾아서 사용해도 유용할 것 같다.

 

캐러셀을 만들면 상단에 메뉴가 움직이는 그런 UI를 캐러셀을 응용해 만들 수 있다.