1. SwiperJS

- 주소 : swiperjs.com/

https://scrap.kakaocdn.net/dn/AJUwP/hyIETJLTtb/8TWmNkngzyjKDXV2uR9f10/img.png?width=1400&height=800&face=0_0_1400_800,https://scrap.kakaocdn.net/dn/HWJTR/hyIEMcOsk5/SDKYCnJOGtCxXTrCQtRQZK/img.jpg?width=500&height=500&face=0_0_500_500" style="margin: 10px 0px; max-width: 100%; clear: both; font-size: 16px;">

- 타이틀에도 써있듯이 가장 모던한 모바일 터치슬라이더를 표방하는 플러그인입니다.

- 장점은 굉장히 많은 옵션이 있다는 점이고, 단점 역시 굉장히 많은 옵션이 있다는 점입니다. 

- 모바일사이트에서만 사용하는 것이 아니라 PC웹, 반응형웹 어디서든 사용하기 편하게 만들어져 있습니다.

- 그리고 2020년부터는 React, Svelte, VueJs, Angular등까지 지원하면서 프론트엔드개발에 엄청난 도움이 되는 사이트입니다.

- 특히 데모사이트를 통해 쉽게 구현할 수 있도록 되어 있습니다.

- MIT Licensed를 갖고 있는 무료라는 것도 큰 장점입니다. 

 

- 다운로드 주소 : github.com/nolimits4web/swiper

- 익스플로러를 지원하는 4.x때의 버전도 다운로드 받으실 수 있습니다. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2. Slick

- 주소 : kenwheeler.github.io/slick/

https://scrap.kakaocdn.net/dn/lUF6W/hyIEIaqUUx/URHeSwlv6t1PYSiIRaL9ck/img.png?width=560&height=400&face=149_81_386_140,https://scrap.kakaocdn.net/dn/TLIyU/hyIEKzkKVZ/Qwo8WVyjzb0JI7qkdD1JNK/img.png?width=560&height=400&face=303_77_325_101" style="margin: 10px 0px; max-width: 100%; clear: both; font-size: 16px;">

- Swiper와 비슷하게 많은 옵션이 있고, 데모페이지가 잘되어 있습니다. 

- IE9 이상이면 사용이 잘되는 점도 장점으로 볼수 있습니다. 

- 멀티뷰 슬라이더 사용시 편리한 장점이 있습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3. bxSlider

- 주소 : bxslider.com/

https://scrap.kakaocdn.net/dn/c1lpk5/hyIEVU7U6f/y8TNBdWm9kqeVDTckGRbtk/img.jpg?width=1600&height=600&face=0_0_1600_600" style="margin: 10px 0px; max-width: 100%; clear: both; font-size: 16px;">

- 역시 MIT License로 무료로 사용할 수 있습니다. 

- 옵션들이 잘 되어 있고 깔끔하게 반응형웹까지 지원한다는 장점이 있습니다.

- 특히 옵션 페이지가 깔끔하게 되어 있어 사용하기 매우 편합니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

4. flexSlider

- 버전2 주소 : flexslider.woothemes.com/

https://scrap.kakaocdn.net/dn/czvLvs/hyIELSwkZa/q19pksUnWlVpe24T0QVI41/img.jpg?width=800&height=504&face=0_0_800_504,https://scrap.kakaocdn.net/dn/bDhFkS/hyIEWmduHO/SE27MCxQnTHkFvo9GRi9XK/img.jpg?width=800&height=504&face=0_0_800_504" style="margin: 10px 0px; max-width: 100%; clear: both; font-size: 16px;">

- 버전1 주소 : woocommerce.com/flexslider/

https://scrap.kakaocdn.net/dn/O28Jo/hyIEKzlpeA/mB6Ig8iAbR5wncwEK0qMV1/img.png?width=2400&height=1260&face=1563_483_1645_573,https://scrap.kakaocdn.net/dn/A94wE/hyIEUPtQrG/f0J9N6HMVNykEY0VaD3kv0/img.jpg?width=800&height=500&face=0_0_800_500" style="margin: 10px 0px; max-width: 100%; clear: both; font-size: 16px;">

옵션에 대한 설명은 버전1이 더 좋은 것 같아서 주소를 두개 첨부해봤습니다.

 

- 초반에 나온 슬라이더로 워드프레스와 같이 나와서 인기있던 슬라이더 입니다. 

- 모바일에서 스와이프까지 잘 지원하고 옵션에 대한 설명이 잘되어 있습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

5. Draggable Dual-View Slideshow

- 주소 : tympanus.net/codrops/2014/06/26/draggable-dual-view-slideshow/

https://scrap.kakaocdn.net/dn/fkHJL/hyIETiIXCn/hCn5kqQkpAqmdxvZN5tMjK/img.jpg?width=1280&height=850&face=0_0_1280_850,https://scrap.kakaocdn.net/dn/eiAmHZ/hyIENQlSbm/puncQ2QvFMNEkYKYQdMyMK/img.jpg?width=1280&height=850&face=0_0_1280_850" style="margin: 10px 0px; max-width: 100%; clear: both; font-size: 16px;">

- 드래그시 두개가 오버랩되며 슬라이드 됩니다. 이것은 직접 데모사이트에 가셔서 테스트해보시면 느낌을 알수 있습니다. 

- 키보드로도 이동이 가능하면 느낌을 다르게 줄수 있는 슬라이더가 될 수 있을 것 같네요.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

6. Four Boxes Slideshow

- 주소 : tympanus.net/codrops/2014/06/11/how-to-create-a-tiled-background-slideshow/

https://scrap.kakaocdn.net/dn/sApkv/hyIELSw41b/aDHV4g9e30pNuoafD0BjmK/img.jpg?width=580&height=315&face=0_0_580_315,https://scrap.kakaocdn.net/dn/cQpDFm/hyIEMKF7XQ/pSGeJq8obIPKqmDwKrDvB1/img.jpg?width=400&height=300&face=0_0_400_300" style="margin: 10px 0px; max-width: 100%; clear: both; font-size: 16px;">

- 바둑판식으로 배경이미지를 슬라이드 쇼처리합니다.

- 4개의 타일이 변하는 듯이 보여주는 3D변형과 애니메이션을 사용한 슬라이드 입니다. 

- 위의 기능을 이용한 사이트라고 하네요 : www.atelier-serge-thoraval.com/en/

www.atelier-serge-thoraval.com" data-og-source-url="http://www.atelier-serge-thoraval.com/en/" data-og-url="http://www.atelier-serge-thoraval.com/en/" data-og-image="" style="margin: 10px 0px; max-width: 100%; clear: both; font-size: 16px;">

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

7. Tilted Content Slideshow

- 주소 : tympanus.net/codrops/2014/03/13/tilted-content-slideshow/

https://scrap.kakaocdn.net/dn/y1Ko6/hyIETJN2MD/mKPeakkWGjkH1QkJV6Fnak/img.jpg?width=580&height=315&face=0_0_580_315,https://scrap.kakaocdn.net/dn/bOciyh/hyIEGXZ3Dv/V7PNSvbQIm4kB42sloY1AK/img.jpg?width=400&height=300&face=0_0_400_300" style="margin: 10px 0px; max-width: 100%; clear: both; font-size: 16px;">

- 이 플러그인은 슬라이드 항목을 표시하고 숨기는데 12가지의 다른 애니메이션을 사용할 수 있습니다.

- 콘텐츠를 기울여서 움직이게 해주는 독특한 스타일의 슬라이드 입니다. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

8. 가로형 아코디언 - raccordion

- 주소 : egrappler.com/raccordion/demo1.htm

- 가로 형태의 아코디언 슬라이더입니다.