슬라이드쇼 구현 (css/javascript/jquery)

슬라이드쇼 구현 (css/javascript/jquery)

1. 기본

흔하게 볼 수 있는 기본 슬라이드쇼. 

HTML의 기본 구조는

• 이미지를 위한 <img>태그
• 이전, 다음으로 넘어가기 위한 <a>태그
• 순서와 현재 위치를 위한 <span>태그

로 이루어져 있으며, CSS로 슬라이드쇼를 위한 기본 모양이 잡혀 있다.

자바스크립트에서는 배열을 이용해 <a>태그 혹은 <span>태그를 클릭하는 이벤트가 발생할 때마다 

반복문으로 전체 이미지를 display:none 해서 감추고, replace를 통해 모든 <span>태그의 className에 active를 제거하는 단계가 포함된다.

그 뒤 현재 인덱스에 해당하는 <span>에 active className을 추가하고, (CSS에 active 클래스 색지정이 되어 있다.)

해당 <img>태그에는 display:block으로 스타일을 변경해 사진이 보여지는 원리로 움직인다.

배열의 길이를 이용해 슬라이드쇼의 끝까지 이동하면 인덱스를 초기화해 처음으로 이동하게 하고 역순도 같은 원리다. 

See the Pen basic sildeshow by kutar37 (@kutar37) on CodePen.

2. 자동

위의 기본 슬라이드쇼와 원리는 같으며 setTimeout()을 추가해, 클릭하지 않아도 일정 시간이 지나면 사진이 바뀌는 슬라이드쇼다.

광고 배너 등에서 가장 흔하게 보이는 방법이 아닐까 싶다.

slides[slideIndex-1].style.display = "block";  
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 2000); // Change image every 2 seconds

See the Pen automatic slideshow by kutar37 (@kutar37) on CodePen.

3. Materialize

클래스만 지정해주고 그냥 갖다쓰면 된다. 자세한 옵션들은 이곳에서 확인할 수 있다. 

$(document).ready(function(){
  $('.slider').slider();
});

See the Pen Materialize slider by kutar37 (@kutar37) on CodePen.

4. Gallery

아래 현재 인덱스를 보여주던 작은 버튼들 대신 미리보기가 가능한 형태다. 

<span>으로 처리되었던 dots 부분이 <img>로 바뀐 것에 불과하지만, 끝까지 슬라이드해보지 않아도 컨텐츠를 확인할 수 있다는 점에서 UX적 우위가 있다.

구현상 원리는 완전히 같으므로 코드에서 큰 차이는 없다.

See the Pen mxaRbb by kutar37 (@kutar37) on CodePen.

5. Pure CSS

자바스크립트 없이 opacity와 transition을 이용해 순수 CSS로 구현한 슬라이드쇼.

radiobutton이 하나만 선택된다는 특징을 이용해 label과 결합한 꼼수다.

CSS의 한계상 각 <label>이 바라보는 이전/다음 이미지를 지정해주어야 한다는 단점이 있어 실제로 구현하기엔 귀찮음이 있다.

이런 방식도 가능하다 정도지, 위의 슬라이드쇼에 스타일을 추가하는 것이 쉽고 빠르고 수정도 간단하다. 

See the Pen CSS image slider w/ next/prev btns & nav dots by kutar37 (@kutar37) on CodePen.

6. 밀어내기

단순히 이미지가 보였다 사라지는 것이 아니라 

초기화시 이미지를 일렬로 늘어놓고 position: absolute; 와 left 를 사용해 이미지를 한장씩 밀어내는 방법이다. 

아래 언급될 라이브러리들은 대부분 이런 방식으로 작동한다. 

제목과 부제목을 위한 텍스트, 자동 롤링, 네비게이션 기능이 포함되어 있다.

(추가)

+ 제이쿼리 안쓰는 분들을 위해 바닐라 자바스크립트로 수정하고, width 값을 고정px에서 100%로 변경함.

https://saintsilver.github.io/components/view/carousel.html

아래는 jQuery가 사용됨.

See the Pen Simple Image Slider by kutar37 (@kutar37) on CodePen.

7. 갖다 쓰기....

기본적인 슬라이드쇼가 아니라 다양한 화면 전환효과, 슬라이드쇼의 쉽고 효과적인 제어, 터치/스와이프 등의 기능 추가, 사진과 동영상의 혼용 등 추가적인 기능이 필요하다면 직접 구현하는 것보다 라이브러리를 갖다 쓰는 것이 낫다. 

직접 써보고 추천하는 슬라이드쇼 라이브러리는 아래와 같다. 

wow가 가장 유명한 것 같은데 유료라서 뺐다. 

Swiper : 모바일에 특화되어 있고, 스와이프를 기본으로 지원하며 옵션이 굉장히 다양해 코드를 수정할 일 없이 옵션부여만으로 다양한 효과를 줄 수 있다. 

slick : 역시 스와이프를 기본지원하고, 옵션은 Swiper보다 조금 적지만 그만큼 사용이 간단하다. 

슬라이드를 동적으로 추가/제거하는 기능, 필터링으로 조건을 달아 슬라이드별로 숨기고 보이는 기능 등을 구현할 일이 있으면 좋다. 

jcSlider : CSS3 애니메이션을 기반으로 만들어졌으며 60여가지의 전환 효과를 간단하게 구현할 수 있다. 옵션은 굉장히 떨어지지만 In/Out 전환효과를 따로 줄 수 있기 때문에 화려한 슬라이드를 만들 수 있다.

업데이트가 안된지 꽤 오래 되서 풀리퀘도 안받아주지만 화려한 효과가 필요하다면 선택.