[jQuery] 웹사이트에 사용가능한 슬라이더(Slider) 8가지 모음

 

 

제이쿼리 혹은 자바스크립트로 구성된 슬라이더 관련 플러그인을 알아보겠습니다.

 

 

 

 

 

 

1. SwiperJS

- 주소 : swiperjs.com/

Swiper - The Most Modern Mobile Touch Slider

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

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

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

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

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

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

 

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

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2. Slick

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

slick - the last carousel you'll ever need

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

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

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3. bxSlider

- 주소 : bxslider.com/

jQuery Content Slider | Responsive jQuery Slider | bxSlider

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

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

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

4. flexSlider

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

FlexSlider 2

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

Flexslider WordPress Slider Toolkit by WooThemes

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

 

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

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

 

 

 

 

 

 

 

 

 

728x90

반응형

 

 

 

 

 

 

 

 

 

 

 

5. Draggable Dual-View Slideshow

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

Draggable Dual-View Slideshow

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

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

6. Four Boxes Slideshow

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

How to Create a Tiled Background Slideshow

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

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

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

Serge Thoraval : Atelier

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

7. Tilted Content Slideshow

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

Tilted Content Slideshow

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

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

8. 가로형 아코디언 - raccordion

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

Responsive Accordion Slider::Demo 1

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