2016-10-24

벌써 5년이나 된 글이다. 그 사이 IE6는 더이상 지원하지 않아도 되는 브라우저가 됐다. 이제 IE8도 점유율이 2% 정도로 떨어졌다. 그래서 더이상 브라우저 호환성에 대해서는 체크하지 않으려고 한다. IE8 정도나 체크해 보고 사용하시라.

또한, 워낙 오래 된 슬라이더들이 많고 새로 나온 슬라이더도 많아서 여기 있는 자료가 썩 유용한지 모르겠다. 그리고 최근에는 bxSlider(MIT 라이센스)가 너무 좋아서 그것만 사용하고 있다.

슬라이더를 찾아 들어왔다면 그냥 bxSlider를 사용할 것을 추천한다. bxSlider가 아닌 다른 것을 찾아 들어온 것이라면 아래 슬라이더들을 참고해 보는 것도 나쁘진 않겠다.

2017-01-05

시간이 워낙 오래된 것들이라, 라이센스가 변한 경우가 있을 수 있다. 따라서 내가 적어 둔 라이센스만 보면 안 된다. 실사용을 할 것이라면 반드시 라이센스를 확인하고 사용하라.


분류를 잘 보고 사용해야 한다

tutorial(연습용 예제)과 plugin은 차이가 있다는 걸 알고 사용하라.

tutorial은 보고 따라하는 거다. 재사용성이 좋을 수도 있지만 안 좋을 확률이 높다. 연습용이기 때문이다. 따라서, tutorial 이라는 제목이 붙은 놈을 갖다 쓰는 건 까다로울 수 있다. 혼자 공부하는 용도로는 좋다.

플러그인은 개발자가 제품으로 내놓은 것이다. 여러 상황을 고려해서 잘 만들었을 가망이 높다. 하지만, 역시 개발자가 모든 상황을 다 대응해 뒀다고 생각지는 마시라.

[플러그인] bxSlider, 반응형 만능 슬라이드 – WTFPL 라이센스.

갤러리 슬라이드, 여러 아이템 슬라이드, 썸네일 슬라이드 등 거의 모든 기능이 있는 슬라이드다.

WTFPL 라이센스는 Do What the Fuck You Want to Public License의 약자로, 한마디로 “니 맘대로 하세요” 라이센스다.

lory

터치로 작동하고, jQuery가 필요없다. 꽤 다양한 옵션을 제공한다.

http://meandmax.github.io/lory/

[플러그인] jGallery. IE9 이상. 상업용 사용 가능.

웹사이트 데모

[플러그인] Nivo Slider

MIT 라이센스므로 안심하고 사용해도 될 듯. 다소 무거워 보이는 게 흠이다.

IE6에서는 테스트 안 했다고 써 있는데 돌려 보니까 돌아는 간다. 좀 버벅대면서 말이다.

http://nivo.dev7studios.com/

[튜토리얼] Slick Slideshow Using jQuery

얘는 내가 실제로 활용해 본 놈인데 썩 어렵지는 않았다. IE6에서도 깔끔하게 돌아간다.

튜토리얼 : http://sixrevisions.com/tutorials/javascript_tutorial/create-a-slick-and-accessible-slideshow-using-jquery/

데모 : http://sixrevisions.com/demo/slideshow/final.html

[프로그램] WOW Slider (상업적 이용인 경우 유료 49$, 69$)

이놈은 jQuery 플러그인도 아니다. 윈도우와 맥용 프로그램이 있고 그 프로그램을 사용해 슬라이드 코드를 짜 주는 놈이다. 비상업적 용도로는 무료고, 상업적 사용은 유료(49$, 69$)다.

웹사이트 : http://wowslider.com/automatic-jquery-slider-noir-squares-demo.html

[튜토리얼] 사진으로 가득한 벽

화면 전체를 썸네일로 채우고 클릭하면 슬라이드 쇼가 나오게 하는 튜토리얼이다. IE6에서 해 보니 잘 돌아간다.

http://tympanus.net/codrops/2010/05/14/sliding-panel-photo-wall-gallery-with-jquery/

[플러그인] jQuery 슬라이드 쇼 갤러리 14개

http://blueprintds.com/2009/01/20/top-14-jquery-photo-slideshow-gallery-plugins/

[튜토리얼] 콘텐트 슬라이더 튜토리얼 11개

http://blueblots.com/tutorials/11-helpful-jquery-content-slider-tutorials/

[플러그인] 디자인을 향상시켜 주는 jQuery 플러그인 30개

http://line25.com/articles/30-awesome-design-enhancing-jquery-plugins

[플러그인] 이미지 갤러리/슬라이드쇼 플러그인 25개

25 jQuery image galleries and slideshow plugins

[튜토리얼] 가로 스크롤바가 있는 갤러리 튜토리얼(ie6 호환 안 됨)

http://tympanus.net/codrops/2010/10/07/slider-gallery/

[튜토리얼] 쌔끈한 모양의 갤러리 – rotating image slider(ie6,7에서 작동함)

http://tympanus.net/codrops/2011/04/28/rotating-image-slider/

[플러그인] 미리 보기가 지원되는 동영상 최적화 슬라이더 – 유료(12$)

http://pixelentity.com/previews/components/estro/

[플러그인] 터치에 최적화된 플러그인 jQuery TouchTouch – 무료(MIT), IE8 이상

CSS3를 사용해 미끄러지는 효과를 낸다. 따라서 IE8,9 모두에서 미끄러지는 효과가 나오지 않는다.

소개 : http://tutorialzine.com/2012/04/mobile-touch-gallery/

다운로드 : https://github.com/martinaglv/touchTouch

[플러그인] 첫화면에 제품 특징 소개 같은 거 할 때 적합해 보이는 슬라이드 플러그인. Sequence.js – 오픈소스, 개인 프로젝트는 무료(GPLv3 license)

CSS3 트렌지션을 사용한다. 파폭과 크롬에선 미려한 효과가 나온다. IE7~9에서는 일반적 슬라이드로 작동한다. 이미지 슬라이더로 사용할 수 있는지는 모르겠고, 제품 소개 같은 거 할 때 사용하면 아주 좋을 것 같다. (아마 이미지 슬라이더로도 사용할 수 있을 텐데, 적합한지는 모르겠다.)

웹사이트 가기

[튜토리얼] 애플 스타일의 멋진 아이템 슬라이드. –

아이템이 샤샤샥하고 튀어나온다. 튜토리얼이다. 튜토리얼이니 알아서 적용하면 될 거다.

튜토리얼 데모

2012-12-18 작성된 영어 글이다. http://www.tripwiremagazine.com/2012/12/jquery-carousel.html

웹사이트 가기 여러 아이템 슬라이드는 여기를 보면 된다.

[플러그인] rcarousel, 반응형은 아니지만 만능 슬라이드 – MIT 라이센스.

갤러리 슬라이드, 여러 아이템 슬라이드 등 거의 모든 기능이 다 있는 슬라이드다. 예전에 알았다면 환호했겠지만, bxSlide와 함께 발견한 탓에 환호를 하진 않았다.

웹사이트 가기 여러 아이템 슬라이드는 여기를 보면 된다.

[플러그인] Animated Responsive Image Grid – 갤러리는 아니고, 이미지를 격자로 늘어 놓고 애니메이션으로 전환. CC BY 2.0 라이센스.(상업용 사용 가능)

라이센스는 CC BY 2.0(한글)이다. 사용할 때 저작자를 반드시 표시해야 한다. 슬라이드 갤러리는 아니지만 꽤 인상적으로 이미지들을 표시해 주기 때문에 갈무리한다. 동영상은 데모3과 데모5다.

웹사이트 데모 GitHub