30-50% off hundreds of digital assets! WordPress themes, video, music and more 30-50% Off Go to Sale
Advertisement
  1. Code
  2. jQuery
Code

유용한 jQuery 슬라이더 20가지

by
Difficulty:BeginnerLength:LongLanguages:

Korean (한국어) translation by Jin Ah Chon (you can also view the original English article)

“웹 페이지 상단”에서 보이지 않는 사망설에도 불구하고, 사용에 적합한 슬라이더를 찾으려는 욕구는 늘 존재합니다.

잠시 솔직해 보죠. 슬라이더는 재밌습니다. 게다가 콘텐츠가 화면에서 움직이는 것을 보는 것 이상으로 클라이언트를 “오, 아”로 감탄시킬 만한 것도 없지요.

슬라이더가 사용자의 행동을 유도하고 아이템들을 하나씩 보여주는 게 전부이므로 슬라이더 배후에 짜여진 코드의 용량이 되도록 가벼운 게 중요합니다. 바로 그 때문에 슬라이더를 제작하는 접근 방식으로 jQuery가 가장 좋습니다.

jQuery는 빠르고 용량이 작으며, 풍부한 기능(feature)를 제공하는 자바스크립트 라이브러리 입니다.

Envato Market에서 제공되는 아래의 20가지 jQuery 슬라이더를 보면, 여러분은 하나의 이미지가 흐려지면서 다른 이미지로 바뀌는 박스보다 슬라이더에 줄 수 있는 더 많은 효과가 있다는 것을 알게 될 겁니다.

1. RoyalSlider - 터치 가능한 jQuery 이미지 갤러리

웹사이트에서 슬라이더를 터치하기 쉽고 반응형으로 적용하는 것이 이전보다 더 중요해졌습니다. RoyalSlider - 터치 가능한 jQuery 이미지 갤러리는 둘 다 가능합니다.

HTML5와 CSS3 모범 사례를 이용해 개발되었기에 확실한 선택이 되죠.

RoyalSlider Touch-Enabled jQuery Image Gallery

그밖에 굉장히 멋진 특징들은 다음과 같습니다.

  • 최적화된 SEO
  • 변경 가능한 설정
  • 10개 이상의 초보자용 템플릿
  • CSS3 트랜지션 대비책 포함
  • 그 외 다수

제 생각에 최고의 특징은 “모듈화된 아키텍처로 짜여진 스크립트”로 가능한 간결함을 유지하도록 주된 JS 파일에서 불필요한 부분을 제외할 선택 사항을 개발자에게 제공합니다.

RoyalSlider - 터치 가능한 jQuery 이미지 갤러리는 모든 웹 개발자의 도구에 추가하기에 좋은, 견고한 자바스크립트 슬라이더입니다.

2. Slider Revolution, 반응형 jQuery 플러그인

슬라이더 공간에서 “혁신적”이기는 쉽지 않습니다. 슬라이더에 관한 한 여러분이 활용할 수 있는 옵션이 그저 많을 뿐이지요. 그럼에도  Slider Revolution 반응형 jQuery 플러그인은 그 런 옵션을 훌륭히 수행하고 있습니다.

jQuery 슬라이더로 얘기하자면, 여러분이 원하는 어떤 것이든 구현해 줍니다.

Slider Revolution Responsive jQuery Plugin

이 슬라이더에 관한 기능은 길게 나열되므로 훌륭한 기능 몇 가지를 아래에 요약해 보겠습니다.

  • 패럴랙스 효과와 맞춤형 애니메이션
  • 최적화된 SEO와 lazy loading 옵션
  • 무한한 레이어 수와 링크 옵션이 있는 슬라이드 추가
  • “쓸 준비가 된” 스타일과 고도의 맞춤화
  • 그 외 다수

이미지와 동영상 플레이어, 소셜 미디어 소스를 넣을 수 있기에 Slider Revolution, 반응형 jQuery 플러그인은 여러분이 찾을 융통성 높고, 맞춤화 가능한 슬라이드 선택 사항 중 하나입니다.

3. LayerSlider 반응형 jQuery 슬라이더 플러그인

“LayerSlider 반응형 jQuery 슬라이더 플러그인”이란 이름만으로 이 jQuery 슬라이더를 정당하게 평가하진 못합니다.

200가지 이상의 2D와 3D 슬라이더 트랜지션에 시선이 갈 겁니다.

LayerSlider Responsive jQuery Slider Plugin

주목할만한 특징 중 일부는 아래와 같습니다.

  • PSD파일로 들어 있는 스킨
  • 13개의 스킨과 3가지 네비게이션 타입
  • 슬라이더 위에 고정된 이미지 추가
  • 최적화된 SEO와 lazy loading되는 이미지
  • jQuery 대비책이 들어 있는, 하드웨어 가속화 CSS3 트랜지션
  • 그 외 다수

앞에 얘기한 슬라이더 같이 어떤 콘텐츠든지 넣을 수 있습니다. HTML5 자체적으로 제공하는 멀티미디어 콘텐츠일지라도 말이죠.

LayerSlider 반응형 jQuery 슬라이더 플러그인에서는 슬라이더 공간에 많은 액션을 구현할 수 있어 솔직히 보기 좋습니다.

4. jQuery Banner Rotator / Slideshow

jQuery Banner Rotator / Slideshow 슬라이더는 복잡하지 않은 솔루션입니다. 기본 기능을 유지하면서도 간단합니다.

jQuery Banner Rotator Slideshow

다음과 같은 기능이 들어 있습니다.

  • 툴팁과 텍스트 설명 등
  • 섬네일 이미지와 컴포넌트 뷰 옵션
  • 글로벌 혹은 개별 슬라이더에 기반한 타이머와 지연 옵션
  • 전체 슬라이더의 여러 트랜지션 혹은 개별적으로 차별화한 트랜지션
  • 그 외 다수

여타의 jQuery 슬라이더에 비해 jQuery Banner Rotator / Slidershow는 기본적이지만, 간과해서는 안됩니다.

5. All In One Slider 반응형 jQuery 슬라이더 플러그인

모든 슬라이더는 저마다 자신만의 관점으로 시장에 나오고, 틈새의 “슬라이더 문제”라면 무엇이 되든 거기 맞춰 솔루션을 제공하고 있습니다.

그런데 이 플러그인은 그렇지 않습니다.

All In One Slider 반응형 jQuery 슬라이더 플러그인은... 음... 일체형이죠.

All In One Slider Responsive Jquery Slider Plugin

제 생각에, 웹 개발자와 디자이너는 자신의 솔루션을 갖고 있지만, 그와 동시에 늘 새로운 것을 찾고 있습니다.

아래의 목록이 "새로운 것"일 수도 있습니다.

  • 배너 회전
  • 섬네일 배너
  • 재생 목록이 있는 배너
  • 콘텐츠 슬라이더
  • 캐러셀(carousel)

또한,  모든 슬라이더 종류에는  jQuery 슬라이더에서 요구하는 기능을 전부가 아닐지라도 대다수 포함하고 있습니다.

All  In One Slider 반응형 jQuery 슬라이더 플러그인여러분의 일체형 슬라이더 솔루션일까요?

6. UnoSlider - 반응형의 터치 가능한 슬라이더

여러분이 사용하는 슬라이더가 터치가 되지 않고 반응형도 아니라면 슬라이드를 제대로 사용하지 못하고 있는 것입니다.

UnoSlider - 반응형 터치 가능한 슬라이더가 사용하기에 맞습니다.

UnoSlider - Responsive Touch Enabled Slider

이 슬라이더에는 기능이 없지도 않고 너무 다양하지도 않습니다.

특징은 아래와 같습니다.

  • 용이한 테마 제작
  • 미리 제작된 12가지 테마
  • 사전 설정된 40가지 트랜지션 효과
  • IE6+ 지원 (옛 브라우저 사용자를 위한)
  • 그 외 다수

 UnoSlider - 반응형의 터치 가능한 슬라이더가 테마에 맞는 훌륭한 콘텐츠 슬라이더가 되도록 디자인과 스타일에 특징에 좀 더 비중을 두고 있습니다.

7. Master Slider - jQuery 터치 스와이프 슬라이더

한방에 끝내주는 하나의 jQuery 슬라이더를 찾고 계신가요?

Master Slider - jQuery 터치 스와이프 슬라이더를 사용해 보세요.

Master Slider - jQuery Touch Swipe Slider

보기 좋은 외관에 관한 한, 이 슬라이드는 최고급 입니다.

  • 스마트 프리로딩
  • 25가지 이상의 템플릿
  • 하드웨어 속도를 높이는 트랜지션
  • 터치 내비게이션과 스와이프 제스처 지원
  • 그 외 다수

인터랙티브한 트랜지션과 움직이는 레이어, 핫스팟이 눈을 사로잡을 것입니다.

Master Slider - jQuery 터치 스와이프 슬라이더 컬렉션은 명작이죠.

8. TouchCarousel - jQuery 콘텐츠 스크롤러와 슬라이더

TouchCarousel - jQuery Content Scroller and Slider는 "무료 지원과 업그레이드"를 장점으로 내세우고 있습니다. 그러나 이 경량의 캐러셀 스타일 jQuery 슬라이더에는 그 외에 내세울 장점이 많습니다.

TouchCarousel - jQuery Content Scroller and Slider

이름에 "터치"가 있기에 전적으로 반응형이며 터치 내비게이션을 지원합니다.

그 외의 특징들은 다음과 같습니다.

  • SEO에 적합함
  • 스마트한 자동 재생
  • 하드웨어 속도를 높이는 CSS3 트랜지션
  • 포토샵 스킨을 이용해 원하는 대로 변경 가능한 UI
  • 그 외 다수

반면 TouchCarousel - jQuery Content Scroller and Slider는 모바일을 유익한 물리에 기반한 스크롤을 사용해 전반적으로 새로운 레벨로 이끌어 줍니다.

9. Advanced Slider - jQuery XML 슬라이더

jQuery 슬라이더는 웹용만은 아닙니다. Advanced Slider - jQuery XML Slider를 이용해 하는 것처럼 애플리케이션과 통합될 때에도 유용합니다. 

Advanced Slider - jQuery XML Slider

HTML 마크업이나 XML을 사용하기에 이 고급 슬라이더는 다수의 임팩트를 담고 있습니다.

  • 움직이는 레이어와 스마트 동영상
  • 100가지 이상의 트랜지션과 150가지 이상의 맞춤형 속성
  • 슬라이더 스킨 15개와 스크롤바 스킨 7개, 내장된 라이트박스 기능
  • 키보다 내비게이션과 터치 스크린 지원, 원하는 대로 변경 가능함
  • 그 외 다수

그중에서도 최고의 특징은 틀림없이 여러분의 애플리케이션에 완벽한 슬라이더 솔루션이 되게 할 Advaced Slider - jQuery XML Slider API일 것입니다.

10. 완전히 반응형이고 확대/축소 효과가 있는 jQuery Slider 

여러분이 이 슬라이더의 특징을 읽기 전에 데모를 보게 하는 jQuery 슬라이더 중의 하나입니다. 왜냐하면 "확대/축소 효과"가 도대체 무엇인지 알고 싶기 때문이죠.

화면보호기를 생각해 보세요.

jquery Slider Zoom InOut Effect Fully Responsive

그 효과는 꽤 경미하지만, 슬라이더에서의 확대/축소 효과는 정적인 이미지 슬라이더로 가득한 월드 와이드 웹(world wide web)에서 쿨한 터치감을 더해 줍니다.

이 멋진 슬라이더의 특징은 다음과 같습니다.

  • CSS3 레이어 트랜지션
  • 레이어용 exit 애니메이션 매개 변수
  • 고정(fixed)과 전체 너비, 전체 화면에 대한 옵션
  • CSS와 HTML로 구성된 움직이는 텍스트
  • 그 외 다수

대다수의 슬라이더는 많은 효과를 하나의 패키지로 전달하려고 하는 반면, 완전히 반응형이고 확대/축소 효과가 있는 jQuery Slider는 켄 번스(Ken Burns) 효과를 아주 잘 전달하고 있습니다.

11. jQuery Carousel Evolution

앞에서 언급했던 Advanced Slider - jQuery XML 슬라이더를 이용하는 것처럼 jQuery Carousel Evolution 슬라이더는 자체의 기능성을 향상하거나 다른 프로젝트에서 이용하는 데 쓰일 수 있는 API를 제공합니다.

jQuery Carousel Evolution

이미지와 HTML 마크업, YouTube와 Vimeo 동영상을 이용해서 즐겨 보세요.

  • SEO에 적합함
  • 캐러셀 스타일 9개
  • 그림자와 반사 효과
  • 설정 가능한 이미지 크기 (앞과 뒤)
  • 그 외 다수

jQuery Carousel Evolution은 여러가지 방식으로 사용될 수 있는 간단한 캐러셀입니다.

12. Sexy Slider

Sexy Slider는 사용되었던 만큼 섹시하지 않습니다. 그러나 늘 변함없기에 신뢰할 솔루션입니다.

Sexy Slider

언뜻 보기에는 그다지 인상적이지 않습니다. 하지만, 이 유연한 jQuery 슬라이더를 세세히 조정하면 여러분의 디자인에 완벽하게 들어 맞게 변경할 수 있습니다.

이 슬라이더에는 다음과 같은 특징이 있습니다.

  • 자동 재생 슬라이드
  • 이미지 캡션
  • 연속 재생 슬라이딩
  • 6가지의 트랜지션 효과
  • 그 외 다수

Sexy Slider는 여러분이 그 역량을 풀고 잠재력을 충분히 발견하기를 기다리고 있습니다.

13. 라이트박스를 이용한 jQuery 이미지와 콘텐츠 스크롤러

모바일 디자인과 터치 내비게이션에 대한 얘기 중에도 데스크톱용으로 잊혀지지 않은 jQuery 슬라이더를 보는 것은 좋습니다.

jQuery Image Content Scroller w Lightbox

라이트박스를 이용한 jQuery 이미지오 콘텐츠 스크롤러는 키보드 입력과 마우스 휠 인터랙션을 지원할 뿐만 아니라 다음과 같은 멋진 기능을 지원합니다.

  • 수평 혹은 수직 방향
  • 슬라이더 안이나 밖에 위치하는 텍스트 캡션
  • 한 번에 보여줄 슬라이더 수 설정
  • 내포된 이미지, 플래시, iframe, Ajax와 인라인 콘텐츠
  • 그 외 다수

이미 내장된 라이트박스가 있는 것도 좋습니다. 여러분이 원하면 라이트박스를 독립적으로 동작시킴으로서, 슬라이더를 이용하든 이용하지 않든 라이트박스를 이용한 jQuery 이미지와 콘텐츠 스크롤러를 사용할 수 있습니다.

14. Translucent - 반응형 배너 회전 / 슬라이더

다수의 jQuery 슬라이더 플러그인에는 일부 디자인 크롬이 들어 있습니다. 여러분이 선호하는 대로 설정할 수도 있지만, 슬라이드에 포함된 기능 자체를 유지하기를 바라기도 하지요.

Translucent - 반응형 배너 회전/슬라이더를 시작해 보세요.

Translucent - Responsive Banner Rotator Slider

프리셋 기능이 많아 어쩌면 설정하고 실행하는 게 여러분이 해야 할 일이겠네요!

슬라이드의 특징은 다음과 같습니다.

  • 6가지 스타일 변형
  • 4가지 트랜지션 효과
  • 2가지 터치 스와이프 트랜지션
  • 설정 가능한 버튼과 캡션
  • 그 외 다수

여타의 슬라이더와 마찬가지로 터치에 적합하며, 반응형이자 하드웨어 가속도를 향상시켜 줍니다.

Translucent - 반응형 배너 회전/슬라이더는 콘텐츠를 드러나게 하는 미니멀 슬라이더로 디자인되었습니다.

15. FSS - 화면전체를 슬라이딩시키는 웹사이트 플러그인

화면 전체를 슬라이드하는 웹사이트를 원한다고요?

FSS - 화면전체를 슬라이딩시키는 웹사이트 플러그인이 여러분에게 필요하겠군요.

FSS - Full Screen Sliding Website Plugin

농담이 아니라, 화면 전체를 슬라이딩시키는 웹사이트를 제작하는 데 이 jQuery 슬라이더를 이용하면 장난아니게 쉽습니다.

여기에는 다음과 같은 기능이 있습니다.

  • AJAX 지원
  • 스크롤바 지원
  • 딥링크 지원
  • 2가지 서로 다른 트랜지션 효과
  • 그 외 다수

키보드 내비게이션과 11페이지 분량의 사용자 가이드도 인상적이지만, 5kb의 파일 용량은 FSS - 화면 전체를 슬라이딩시키는 웹사이트 플러그인에서 가장 인상적이랍니다.

16. 반응형이자 터치 화면에 적합한 Zozo Accordion

한 가지 스타일에 집중하고 정말 잘 동작하는 jQuery 슬라이더의 또 다른 예제가 여기 있습니다.

반응형이자 터치 화면에 적합한 Zozo Accordion은 괜찮은 아코디언 스타일의 슬라이더를 찾는 이들에게 필수품입니다.

Zozo Accordion - Responsive and Touch-Friendly

이 CSS3로 움직이는 아름다움에는 다음과 같은 탄탄한 기능 세트가 들어 있습니다.

  • 수평 혹은 수직 방향의 아코디언
  • 시멘틱 HTML5와 SEO에 적합
  • 터치와 키보드, WAI-ARIA 지원
  • 10가지 이상의 스킨과 6가지의 레이아웃 포함
  • 그 외 다수

반응형이자 터치화면에 적합한 Zozo Accordion 슬라이더는 고객지원과 업데이트가 무료이며, 아코디언 jQuery 슬라이더에서 원하는 것 대다수를 얻을 수 있습니다.

17. jQuery Responsive OneByOne Slider Plugin

jQuery Responsive OneByOne Slider Plugin은 슬라이더라기보다는 애니메이션 같이 느껴집니다.

 이 자그마한 보석은 한번에 슬라이드 하나를 보여주는 대신 하나의 슬라이드에 있는 각각의 요소를, 다음 슬라이드로 넘어가기 전에 모든 요소가 이동할 때까지 하나씩 보여줍니다.

jQuery Responsive OneByOne Slider Plugin

CSS3 애니메이션은 Animate.css를 기반으로 동작합니다. 경량에 레이어드화 되었으며, 모바일 웹용으로 즉시 적용 가능합니다.

이 작고 재미난 슬라이드의 특징은 다음과 같습니다.

  • 압축된 4kb 자바스크립트
  • 자동 지연 및 hover시 멈춤 옵션
  • 하드웨어 속도를 높이는 CSS3 트랜지션
  • 가지각색으로 애니메이션될 수 있는 슬라이드나 요소
  • 그 외 다수

마우스를 이용해 둘러보는 드래그 앤 드롭 기능 옵션도 있습니다. 그리고 jQuery Responsive OneByOne Slider Plugin트위터 부트스트랩의 캐러셋과도 잘 맞춰 동작합니다.

18. Accordionza - jQuery 플러그인

jQuery 슬라이더가 이보다 가볍지 못할 겁니다.

로딩하는 데 단 3kb를 사용하는 Accordionza - jQuery 플러그인은 가장 가벼운 아코디언 슬라이더 옵션입니다.

Accordionza - jQuery Plugin

내장된 스타일 3가지가 맘에 들지 않는다면, 이 유연한 아코디언의 HTML과 CSS를 변경하면 됩니다.

특징은 다음과 같습니다.

  • 키보드 내비게이션
  • 쉽게 설정 가능한 효과와 제어 기능
  • 점진적인 향상(progressive enhancement) - 자바스크립트를 사용하지 않고 볼 수 있음.
  • 그 외 다수

Accordionza - jQuery 플러그인은 여러가지 혼합된 콘텐츠를 보여줄 수 있어서, 융통적이며 유용한 아코디언 슬라이드 옵션으로 최고의 선택이 된다는 점을 기억하세요.

19. mightySlider - 반응형 다목적 슬라이더

mightySlider - 반응형 다목적 슬라이더는 참으로 대단합니다.

그저 이미지 슬라이더로 사용할 뿐만 아니라 내비게이션을 기반으로 하여 아이템을 활용해 화면에 가득찬 단 방향 슬라이더로 멋진 단일 페이지 웹사이트 디자인을 제작할 수도 있습니다.

mightySlider - Responsive Multipurpose Slider

소스를 열어 보면 옵션을 많이 발견할 것입니다.

  • 키보드와 마우스, 터치 지원
  • 하드웨어 속도를 높이는 CSS3 트랜지션
  • 깔끔하고 타당한 마크업과 최적화된 SEO
  • 무한 개의 슬라이드와 캡션 레이어(caption layers), 캡션 효과
  • 그 외 다수

API는 강력하며 개발자에게 적합하며, 적용될 수 있는 다양한 방식을 더해 줍니다.

깔끔하고 주석이 잘 달린 코드를 사용하기에 mightySlider - 반응형 다목적 슬라이더는 훌륭하며 진보적인 jQuery 슬라이더 입니다.

20. Parallax Slider - 반응형 jQuery 플러그인

Parallax Slider - 반응형 jQuery 플러그인은 jQuery Responsive OneByOne Slider Plugin과 같이 동작하며, 특정 슬라이드 안에서 개별 레이어를 따로 애니메이션시켜 줍니다.

일부 패럴랙스 애니메이션을 불러와 웹사이트에 추가함으로써 슬라이드 여러 개 혹은 단 하나의 슬라이드에서 동작 할 수 있습니다.

Parallax Slider - Responsive jQuery Plugin

여기에는 4가지 서로 다른 슬라이드 유형이 있는데, 모두 동일한 애니메이션과 패럴랙스 효과를 제공합니다.

다수의 jQuery 슬라이드처럼 이 슬라이드도 다음과 같은 특징을 갖고 있습니다.

  • 사용자 정의 가능
  • 터치 스크린 지원
  • 반응형이며 무제한 레이어 수
  • 자동 실행, 루프, 높이와 너비, 타이머 매개 변수
  • 그 외 다수

애니메이션 되는 레이어는 텍스트나 이미지에 한정되지 않습니다. YouTube와 Vimeo, 그리고 HTML5 동영상도 포함됩니다.

Parallax Slider - Responsive jQuery Plugin은 플래시 같은 효과가 플래시보다 더 낫게 실행될 수 있는지, 그리고 모든 기기를 통틀어 지원되는지에 대한 또 다른 좋은 예가 됩니다.

결론

단지 한 이미지에서 다른 이미지로 바꾸었던 jQuery 슬라이더가 더 넓은 범위의 창의적인 도구로 어떻게 진화하고 있는지 아는 것은 흥미롭습니다. 3D와 패럴랙스, 풀 페이지 슬라이더를 보았으며 데스크톱이나 스마트폰에서 반응형이며 잘 보입니다.

여러분이 이 목록에서 좋아하는 jQuery 슬라이더를 찾지 못했으면, Envato에 있는 jQuery 코드 튜토리얼을 보고 완전히 새롭고 독특한 슬라이더를 개발할 수 있습니다. 그게 아니라면 선택의 폭이 넓은 Envato Market에서 다른 훌륭한 jQuery 슬라이더를 꼼꼼하게 알아보기 바랍니다.

여러분이 선호하는 jQuery 슬라이더는 무엇이고, 그것을 왜 선호하시나요?

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.