jQuery 플러그인은 jQuery 라이브러리 위에서 동작하며 슬라이더, 갤러리, 폼 검증 같은 기능을 웹페이지에 추가하는 자바스크립트 확장 모듈입니다. 같은 역할을 하는 jQuery 비의존 라이브러리(Swiper, Flickity)도 함께 모았습니다.
웹 슬라이더와 플러그인
홈페이지 제작에 자주 쓰는 jQuery 플러그인을 슬라이더, 갤러리, 레이아웃, 폼, 테이블, 스크롤 효과로 나눠 모았습니다.
TOP 6
제이쿼리 UIjQuery 위에서 달력 드래그 다이얼로그 등 UI 위젯을 쓰는 확장 라이브러리jqueryui.com
제이쿼리DOM 이벤트 Ajax 애니메이션을 간결한 API로 다루는 jQuery 자바스크립트 라이브러리jquery.com
SlickjQuery 반응형 터치를 지원 캐러셀 라이브러리 Slickkenwheeler.github.io
Owl Carousel 2jQuery 기반 반응형 캐러셀 플러그인 Owl Carousel 2owlcarousel2.github.io패럴렉스 슬라이더스크롤 슬라이드에 깊이감 있는 패럴랙스 히어로 슬라이더 UI 구현 예제 컴포넌트 Parallax Slidertympanus.net
Swiper하드웨어 가속 전환 효과와 네이티브에 가까운 동작 오픈소스 모바일 터치 슬라이더 라이브러리swiperjs.com
추천 모음
웹 글쓰기 에디터
그누보드·영카트에서 쓰는 스마트에디터 2를 비롯해 CKEditor, TinyMCE, Summernote, Quill, Toast UI Editor 등 웹사이트에 넣는 글쓰기 에디터를 모았다.
무료 웹폰트와 한글 폰트
웹에 쓰기 좋은 무료 웹폰트와 한글 서체 경로를 모아 두었습니다.
웹디자인 레퍼런스
국내외 웹디자인 사례와 어워드, 갤러리를 벤치마킹용으로 모아 두었습니다.
한글 맞춤법 검사
맞춤법과 띄어쓰기를 점검할 때 쓰는 온라인 검사 도구와 표기 기준 자료를 모아 두었습니다.
더 살펴볼 소스
Flickity터치 반응형 슬라이드를 구현하는 JavaScript 캐러셀 라이브러리 Flickityflickity.metafizzy.co팬시박스이미지 동영상 iframe을 팝업 갤러리로 보여 주는 라이트박스 스크립트fancyapps.com
매그니픽 팝업이미지 영상 인라인 HTML을 라이트박스로 띄우는 반응형 jQuery 플러그인dimsemenov.com
메이슨리높이가 다른 블록을 빈틈 없이 이어 붙이는 벽돌형 그리드 레이아웃 라이브러리masonry.desandro.com
아이소토프타일을 필터 정렬하며 그리드 레이아웃을 잡는 자바스크립트 레이아웃 라이브러리isotope.metafizzy.co라이트박스클릭한 이미지를 페이지 위 오버레이로 확대해 보여 주는 경량 라이트박스 스크립트lokeshdhakar.com
셀렉트2검색 태그 Ajax 원격 옵션을 지원 jQuery 기반 Select2 셀렉트 UI 플러그인select2.org
jQuery Validation폼 필드 규칙 메시지를 선언적으로 검증하는 jQuery Validation 플러그인jqueryvalidation.org
데이터테이블HTML 표에 정렬 검색 페이징 필터를 더하는 jQuery 플러그인 DataTablesdatatables.net
jQuery Inputmask전화 날짜 금액 등 입력 형식을 마스크로 제한하는 jQuery Inputmask 플러그인robinherbots.github.io썸머노트웹 페이지에 임베드하는 WYSIWYG 리치 텍스트 에디터 Summernotesummernote.org
jQuery File Upload다중 파일 드래그앤드롭 진행률을 지원 jQuery File Upload 플러그인blueimp.github.io
툴팁스터마우스 포커스 시 툴팁과 커스텀 팝오버를 띄우는 jQuery 플러그인calebjacob.com
풀페이지화면을 섹션 단위로 풀스크린 스크롤하는 랜딩 소개 페이지용 자바스크립트alvarotrigo.com
- 카운터업스크롤 진입 시 숫자를 올리는 카운트 애니메이션 CounterUp jQuery 플러그인github.com
웨이포인트스크롤 위치에 도달하면 콜백을 실행하는 Waypoints 스크롤 트리거 jQuery 플러그인imakewebthings.com
웹 슬라이더와 플러그인 캐러셀 슬라이더란
P509웹 슬라이더와 플러그인 맥락에서 「웹 슬라이더와 플러그인 캐러셀 슬라이더란」을 정리합니다. 아래 내용만으로도 판단에 필요한 기준과 예시를 확인할 수 있습니다.
캐러셀 슬라이더(Carousel Slider)는 여러 콘텐츠(이미지, 텍스트, 동영상 등)를 슬라이드 형태로 순차적으로 보여주는 인터페이스입니다. 사용자는 좌우 화살표나 자동 전환으로 여러 콘텐츠를 볼 수 있습니다. 보통 홈페이지나 랜딩 페이지의 주요 섹션에 쓰이며, 이미지 슬라이더, 롤링 이미지, 슬라이드쇼, 로테이팅 배너 등 다양한 명칭으로 부릅니다.
캐러셀 슬라이더 주요 기능
P510- 자동 슬라이딩: 일정 시간마다 자동으로 슬라이드가 전환됩니다.
- 수동 조작: 사용자가 좌우 화살표나 드래그로 슬라이드를 전환할 수 있습니다.
- 페이지네이션: 하단에 점·숫자로 현재 위치를 표시합니다.
- 반응형 디자인: 화면 크기에 맞게 슬라이드 크기와 레이아웃이 조정됩니다.
- 콘텐츠 다양성: 이미지, 텍스트, 비디오 등 다양한 형태를 넣을 수 있습니다.
| 기능 | Swiper | Slick | Owl Carousel 2 | Flickity |
|---|---|---|---|---|
| 자동 슬라이딩 | autoplay | autoplay | autoplay | autoPlay |
| 수동 조작 (화살표) | navigation | arrows | nav | prevNextButtons |
| 수동 조작 (드래그) | 기본 지원 | draggable | mouseDrag, touchDrag | draggable |
| 페이지네이션 | pagination | dots | dots | pageDots |
| 반응형 | breakpoints | responsive | responsive | CSS 기반 셀 너비 |
Swiper 연동과 슬라이드 전환 이벤트
P512Swiper는 jQuery 없이 쓰는 모바일 터치 슬라이더입니다. 공식 패키지로 React, Vue, Angular와 붙일 수 있고, 이미지 갤러리·제품 슬라이드·뉴스 롤링처럼 터치 조작이 중요한 구간에 씁니다.
슬라이드가 바뀔 때 헤더 배경색 같은 주변 UI를 맞추려면, 초기화 옵션의 이벤트(예: slideChangeTransitionStart)에서 현재 슬라이드 인덱스를 읽고 해당 요소 스타일을 바꾸면 됩니다. 자동 재생(autoplay)·페이드(effect)·페이지네이션은 위 옵션표의 Swiper 열과 같이 설정합니다.
웹 슬라이더와 플러그인 호환과 충돌
P516| 항목 | 내용 |
|---|---|
| jQuery 버전 | 플러그인마다 지원하는 jQuery 버전(1.x, 2.x, 3.x)이 달라 호환 범위를 확인합니다. |
| 중복 로드 | CMS와 플러그인이 jQuery를 각각 로드하면 충돌이 생길 수 있어 noConflict 모드를 검토합니다. |
| 로드 순서 | jQuery → 플러그인 → 초기화 코드 순서를 지킵니다. |
| 레거시 플러그인 | 유지 보수가 멈춘 플러그인은 jQuery Migrate 사용 또는 대체 라이브러리를 검토합니다. |
웹 슬라이더와 플러그인 플러그인 선택 기준
P517| 기준 | 확인 항목 |
|---|---|
| 의존성 | jQuery 필요 여부 |
| 조작 방식 | 터치, 드래그, 키보드 |
| 파일 용량 | 최소화 파일 크기 |
| 유지 상태 | 최신 릴리스 시점, 저장소 활동 |
| 라이선스 조건 | 상업 사용 시 조건 (Fancybox, Isotope, fullPage.js는 상업 사용 조건이 별도로 있는 경우가 있음) |
| 적용 방식 | CDN 링크, 파일 업로드, npm 패키지 |
관련 제작 환경은 홈페이지 제작 CMS 모음, 무료 홈페이지 만들기 서비스 모음과 함께 보면 흐름이 이어집니다.
등록수정조회3