인터넷에는 훌륭한 jQuery 회전 목마 및 슬라이더 플러그인이 많이 있습니다. 추가 효과로 동적 스크롤을 구현할 수 있습니다.
이것은 지난 몇 년 동안 가장 인기 있는 웹 디자인 트렌드 중 하나입니다. 또한 기성 라이브러리와 jQuery 플러그인을 사용하면 시간을 크게 절약할 수 있습니다. JavaScript 및 CSS 파일에 링크한 다음 원하는 HTML 요소에 효과를 적용하기만 하면 됩니다.
자신의 기본 설정과 CSS 스타일을 지정할 수도 있습니다. 오늘의 기사는 캐러셀과 슬라이더를 만들기 위한 반응형 jQuery 플러그인을 소개하는 것을 목표로 합니다.
Distractful은 터치에 민감한 전체 화면 콘텐츠 슬라이더를 만들기 위한 jQuery 플러그인입니다.
지원되는 반응형 전체 화면 jQuery 콘텐츠 캐러셀 슬라이더 터치 스크린. 플러그인은 아래에 배포됩니다. 라이센스 계약 GNU 일반 공개 라이센스 v3:
Neoslide: 간단하고 확장 가능한 jQuery 캐러셀 플러그인
모든 웹 페이지에서 완전히 사용자 정의 가능한 슬라이더를 사용할 수 있게 해주는 간단하고 확장 가능한 jQuery 플러그인:
hslider 플러그인 적응형 갤러리전체 너비 이미지
다음을 사용하여 이미지를 표시하는 또 다른 플러그인 적응형 회전 목마컨트롤 및 사용자 지정 지연 시간이 있는 jQuery:
Carousel 3D: 3D 회전 효과가 있는 jQuery 회전 목마 플러그인
Sleek Slider: 반응형 jQuery 전체 화면 캐러셀
다양한 종류의 탐색으로 콘텐츠와 이미지를 보여주는 작고 매력적인 jQuery 캐러셀( 이미지 축소판, 페이지 매김 요소 또는 탭이 있는 SVG 화살표):
PaW 캐러셀: jQuery 응답 캐러셀
PaW Carousel(v2)은 이미지 썸네일이 있는 반응형의 간단한 jQuery 캐러셀을 만들기 위한 미니어처 플러그인입니다.
Carousel Sharer: jQuery 소셜 공유 캐러셀
Carousel Sharer는 여러 제품을 연속적으로 표시하고 방문자가 Facebook, Twitter, Google+ 및 Pinterest에서 제품을 공유할 수 있도록 하는 jQuery 플러그인입니다.
Simply Carousel: 최소한의 반응형 이미지 캐러셀
Simply Carousel은 유연한 반응형 이미지 슬라이더와 캐러셀을 만들 수 있는 작고 빠른 jQuery 플러그인입니다.
슬라이드: 반응형 jQuery 캐러셀 및 터치 지원 슬라이드쇼
Slides는 축소판, 화살표 탐색 및 사용자 정의 컨트롤을 사용할 수 있는 기능이 있는 jQuery 사이트용 반응형 캐러셀을 만들기 위한 소형 jQuery 플러그인입니다. 터치 스크린 지원 구현:
jQuery 콘텐츠 캐러셀
자동 재생, 컨트롤, 심지어 콜백까지 포함하는 간단한 반응형 jQuery 캐러셀:
Slick: 반응형 및 반응형 jQuery 캐러셀
Slick은 모든 HTML 요소에서 작동하는 사용자 지정 가능하고 반응이 빠르며 모바일에 최적화된 jQuery 캐러셀 및 슬라이더를 만들기 위한 "신선한" 플러그인입니다.
bxSlider: jQuery HTML 콘텐츠 슬라이더
bxSlider는 오늘날 사용 가능한 최고의 jQuery 콘텐츠 슬라이더 중 하나입니다. 이 플러그인은 슬라이드쇼 구성에 좋습니다.
CarouFredSel: 유연하고 강력한 jQuery 회전 목마 플러그인
jQuery.carouFredSel은 HTML 요소를 콘텐츠 캐러셀로 바꾸는 플러그인입니다. 수평 및 수직으로 동시에 하나 이상의 요소를 스크롤할 수 있습니다. 다음을 활성화할 수도 있습니다. 자동 재생스크롤을 무한대로 만드십시오.
jQuery로 콘텐츠 캐러셀 순환
클릭할 때마다 새로운 콘텐츠 블록이 표시되는 캐러셀입니다. 십자가를 클릭하면 활성 블록이 닫히고 원래 축소판 보기 위치로 돌아갑니다.
클라우드 캐러셀: 자바스크립트 3D 캐러셀
이 캐러셀을 사용하면 현실적인 관점을 만들 수 있습니다. 많은 jQuery 3D 캐러셀은 위치가 아닌 이미지 크기에만 원근 효과를 적용하므로 페이지에 불균형한 요소가 생깁니다.
Elastislide: jQuery 응답 캐러셀
Elastislide는 모든 화면 크기에 적응하는 반응형 jQuery 캐러셀입니다. 캐러셀을 유연한 너비의 컨테이너에 붙여넣으면 캐러셀 자체도 유동적으로 만들어집니다.
jCarousel 라이트
이 플러그인을 사용하면 이미지나 HTML 요소를 슬라이더로 볼 수 있습니다. 무게는 2Kb에 불과하지만 사용자 고유의 설정을 사용할 수 있습니다.
3D 회전 목마
커서 위치에 따라 그림자 효과 및 애니메이션이 있는 이미지에서 3D jQuery 캐러셀을 만듭니다.
jQuery 캐러셀 플러그인
이 플러그인의 설정을 통해 캐러셀에 표시할 항목 수를 결정할 수 있으며, 그 후에 플러그인이 원하는 너비에 맞게 조정합니다.
jQuery로 이미지 슬라이더 회전하기
약간 추가된 비대칭 이미지 슬라이더: 이미지를 스크롤할 때 이미지가 약간 회전합니다. 요소의 약간의 변위로 인해 슬라이더는 비정상적인 모양을 취합니다.
jQuery 기능 캐러셀
이 플러그인은 추천 기사를 표시하도록 설계되었습니다. 홈페이지, 하지만 다른 콘텐츠에도 사용할 수 있습니다. 최대 3개의 이미지를 동시에 표시할 수 있으며 나머지 jQuery 콘텐츠 캐러셀 요소는 숨겨집니다.
jQuery 무한 캐러셀
캐러셀에 이미지와 동영상을 무제한으로 표시할 수 있는 jQuery 플러그인입니다. 다른 캐러셀과 달리 Infinite Carousel은 탐색 없이 항목을 무한 루프로 표시합니다.
jQuery 액체 캐러셀 플러그인
Liquid Carousel은 흐르는 듯한 디자인을 만들기 위해 설계된 플러그인입니다. jQuery Responsive Carousel 컨테이너의 크기가 조정될 때마다 표시되는 항목 수가 새 너비에 맞게 조정됩니다.
제이쿼리 MS 캐러셀
작성자:스크롤 없이 볼 수 있는 웹 페이지 부분의 "죽음"에 대한 소문에도 불구하고 좋은 슬라이더의 필요성은 어디에서도 사라지지 않았습니다. 잠시 솔직해지자. 슬라이더는 재미있다. 또한 움직이는 콘텐츠와 달리 사용자에게 "와우" 효과를 주는 것은 없습니다. 모든 슬라이더는 서로를 대체하는 여러 슬라이드의 집합이며 슬라이더 코드는 가능한 한 가볍게 하는 것이 매우 중요합니다. 여기에서 jQuery가 유용합니다.
20번을 보세요 jQuery 슬라이더 Envato Market 사이트의 s를 보면 매끄럽게 변화하는 이미지가 있는 단순한 블록 이상의 슬라이더가 있음을 이해하게 될 것입니다.
1. RoyalSlider - jQuery를 사용한 터치스크린 이미지 갤러리
이제 터치스크린 친화적이기도 한 반응형 슬라이더는 예전보다 훨씬 더 많은 것을 의미합니다. RoyalSlider는 적응성과 터치 스크린 작업이라는 두 가지 기능을 결합합니다. 좋은 선택, 갤러리가 HTML5 및 CSS3로 작성되었기 때문입니다.
몇몇의 흥미로운 기능:
웹 사이트를 직접 만드는 방법은 무엇입니까?
높은 사용자 정의 가능성
10개 이상의 시작 템플릿
CSS3 전환에 대한 대체가 있습니다.
제 생각에 가장 멋진 기능은 "모듈식 스크립트 아키텍처"로, 기본 JS 파일에서 불필요한 것을 비활성화하여 무게를 줄일 수 있습니다. jQuery 터치스크린 이미지 갤러리인 RoyalSlider는 모든 개발자의 툴킷에 반드시 있어야 하는 강력한 JavaScript 슬라이더입니다.
2. 슬라이더 혁명 반응형 jQuery 플러그인
슬라이더로 "혁신적인" 작업을 수행하는 것은 쉽지 않습니다. 슬라이더의 경우 추가할 수 있는 기능이 너무 많습니다. 그러나 Slider Revolution은 정말 좋은 시도입니다. jQuery 슬라이더 중에서 이 인스턴스가능한 모든 요구 사항을 충족합니다.
슬라이더 기능 목록이 너무 길어서 가장 좋은 것만 나열하겠습니다.
시차 효과 및 사용자 정의 애니메이션
링크가 있는 무제한 레이어 및 슬라이드
바로 사용할 수 있는 맞춤형 스타일
그리고 훨씬 더
이미지, 내장 비디오 플레이어 및 링크 추가 가능 소셜 네트워크 Slider Revolution은 웹에서 가장 유연하고 사용자 정의 가능한 옵션 중 하나입니다.
3. LayerSlider 반응형 jQuery 슬라이더 플러그인
"LayerSlider 반응형" 제이쿼리 플러그인슬라이더"는 이 슬라이더를 제대로 인식하지 못합니다.
200개 이상의 2D 및 3D 슬라이드 전환이 모든 사람의 머리를 돌릴 것입니다.
몇 가지 주목할만한 기능:
13가지 스킨과 3가지 메뉴 유형
슬라이더 위에 고정 이미지를 배치하는 기능
그리고 jQuery 폴백
그리고 훨씬 더
이전 슬라이더와 마찬가지로 HTML5 상주 멀티미디어 콘텐츠를 포함하여 거의 모든 콘텐츠를 추가할 수 있습니다. LayerSlider는 슬라이더에 생명을 불어넣고 매우 아름답습니다.
4. jQuery 배너 로테이터 / 슬라이드쇼
jQuery 배너 회전자/슬라이드쇼는 핵심 기능을 희생하지 않는 아주 간단한 슬라이더입니다.
기회:
툴팁, 텍스트 삽입 등
구성 요소를 보기 위한 미리 보기 및 다양한 옵션
하나의 슬라이더 또는 모든 슬라이더에 대한 지연이 있는 타이머
모든 슬라이드에 대한 다중 전환 또는 각 슬라이드에 대해 개별적으로 다른 전환
jQuery 배너 로테이터/슬라이드쇼는 다른 jQuery 슬라이더에 비해 기본적인 기능만 가지고 있지만, 잊지 말아야 합니다.
5. 올인원 슬라이더 - 반응형 jQuery 슬라이더 플러그인
웹에 나타나는 모든 슬라이더는 고유한 비전을 가지고 있으며 해당 분야의 모든 문제를 해결합니다. 그러나 이것은 아닙니다. 올인원 슬라이더는 "모두 포함"이라고 할 수 있습니다.
나는 대부분의 웹 개발자와 디자이너가 검증된 솔루션을 가지고 있다고 생각하지만 그들은 항상 새로운 것을 찾고 있습니다. 그리고 이 "새로운 것"에는 다음이 포함됩니다.
배너 로테이터
미리보기 배너
재생 목록 배너
콘텐츠 슬라이더
회전 목마
모든 슬라이더 유형은 jQuery 슬라이더에 필요한 기능의 전부는 아니지만 대부분을 지원합니다. 올인원 슬라이더가 귀하의 올인클루시브입니까?
6. UnoSlider - 반응형 터치스크린 슬라이더
슬라이더가 반응하지 않고 터치 스크린을 지원하지 않으면 슬라이더가 잘못된 것입니다. UnoSlider가 맞습니다.
이 슬라이더는 단순함과 풍부한 기능 세트 사이에서 태양 아래 그 자리를 찾았습니다. 기능:
테마 지원
12가지 미리 만들어진 테마
40 전환
IE6+ 지원
디자인과 스타일에 중점을 둔 모든 기능으로 UnoSlider는 테마를 추가할 수 있는 훌륭한 콘텐츠 슬라이더입니다.
7. 마스터 슬라이더 - jQuery 터치스크린 슬라이더
"모두를 지배하는 하나의 jQuery 슬라이더"를 찾고 계십니까? Master Slider – 다양한 화면 크기를 위한 jQuery 터치스크린 슬라이더를 사용해 보세요…
때에 온다 좋은 디자인, 이 인스턴스는 최고 중 하나입니다.
25개 이상의 템플릿
하드웨어 가속 전환
터치 및 스와이프 지원
그리고 훨씬 더
대화형 전환, 애니메이션 레이어 및 핫스팟은 확실히 당신의 주의를 끌 것입니다. 마스터 슬라이더는 예술 작품입니다.
8. TouchCarousel - jQuery 콘텐츠 스크롤러 및 슬라이더
TouchCarousel은 무료 지원 및 업데이트를 제공합니다. 그러나 이것이 이 경량 jQuery 캐러셀 슬라이더의 모든 기능은 아닙니다.
이름에 "터치"라는 단어가 포함되어 있으면 슬라이더가 완전히 반응하고 터치를 지원한다고 추측할 수 있습니다. 다른 특징들:
SEO 최적화
스마트 자동 재생
CSS3 하드웨어 가속 전환
Photoshop용 사용자 정의 가능한 UI 및 4가지 스킨
TouchCarousel은 고유한 물리적 슬라이드 스크롤 기능으로 인해 완전히 새로운 수준모바일 장치에 대한 감각.
9. 고급 슬라이더 - jQuery XML 슬라이더
jQuery 슬라이더는 웹 사이트 이상에서 사용할 수 있습니다. 웹 애플리케이션에서도 유용할 수 있습니다. 고급 슬라이더를 사용하면 이 작업을 수행할 수 있습니다.
HTML 또는 XML 마크업을 사용하는 이 고급 슬라이더는 지속적인 인상을 줍니다.
애니메이션 레이어 및 스마트 비디오
100개 이상의 전환 및 150개 이상의 사용자 정의 속성
15개의 슬라이더 스킨, 7개의 스크롤바 스킨 및 기본 라이트박스 지원
키보드 탐색, 터치 지원 및 전체 사용자 정의
그리고 훨씬 더
그러나, 가장 최고의 기능이것은 Advanced Slider - jQuery XML Slider API로, 슬라이더를 웹 애플리케이션을 위한 완벽한 선택으로 만들어줍니다.
10. jQuery 슬라이더 확대/축소 효과 완전 반응형
기능에 대해 읽기 전에 데모를 보게 만드는 jQuery 슬라이더 중 하나입니다. 이 "확대/축소 효과"가 의미하는 바를 이해하고 싶을 뿐입니다.
확대/축소 효과는 다소 약하지만 슬라이더의 나머지 부분은 고정되어 있는 동안 이미지에 제어감과 실제 터치를 추가합니다. 슬라이더 기능:
CSS3 레이어 전환
레이어에 대한 애니메이션 종료 옵션
고정 너비, 전체 화면 및 전체 너비 옵션
HTML이 포함된 애니메이션 텍스트 및 CSS 서식
대부분의 슬라이더는 가능한 한 많은 효과를 넣으려고 하고 jQuery 슬라이더 확대/축소 효과 완전 반응형에는 Ken Burns 효과만 있지만 잘 구현되어 있습니다.
11. jQuery 회전 목마의 진화
앞서 언급한 Advanced Slider - jQuery XML Slider와 마찬가지로 jQuery Carousel Evolution에는 기능을 향상시키거나 슬라이더를 다른 프로젝트에 통합하는 데 사용할 수 있는 자체 API가 있습니다.
웹 사이트를 직접 만드는 방법은 무엇입니까?
오늘날 스스로 웹사이트를 만들려면 어떤 기술과 지식이 필요합니까? 집중적으로 배우십시오!
이미지, HTML 마크업, YouTube 및 Vimeo 동영상을 통해 다음과 같은 이점도 얻을 수 있습니다.
SEO 최적화
9가지 캐러셀 스타일
그림자 및 반사 효과
이미지 크기는 앞뒤로 조정할 수 있습니다.
jQuery 회전 목마 진화 - 간단한 회전 목마많은 사용 사례와 함께.
12 섹시한 슬라이더
섹시한 슬라이더는 이전만큼 섹시하지 않습니다. 그러나 나이 때문에 이 슬라이더는 신뢰할 수 있습니다.
언뜻 보기에는 슬라이더가 그다지 인상적이지 않지만 잘 구성되어 있으면 디자인에 완벽하게 들어 맞습니다. 기회:
슬라이드 자동 재생
이미지 캡션
연속 슬라이드 재생
6가지 전환 효과
Sexy Slider는 당신이 그 잠재력을 최대한 발휘하기를 기다리고 있습니다.
13. 라이트박스가 포함된 jQuery 이미지 및 콘텐츠 스크롤러
이 모든 모바일 친화적인 디자인과 터치 스크린 지원으로 데스크탑을 잊지 않는 jQuery 슬라이더를 보는 것이 좋습니다.
Lightbox가 포함된 jQuery 이미지 및 콘텐츠 스크롤러는 무엇보다도 키보드 입력과 마우스 휠을 지원합니다.
수평 및 수직 방향
슬라이더 내부 또는 외부의 텍스트 캡션
한 번에 볼 수 있는 특정 수의 슬라이드를 설정하는 기능
인라인 이미지, Flash, iframe, Ajax 및 인라인 콘텐츠
슬라이더에는 라이트박스도 내장되어 있습니다. 선택적으로 jQuery Image & Content Scroller w/ Lightbox에서는 슬라이더 자체를 실행할 수 없지만 라이트박스를 별도로 실행할 수 있습니다.
14. 반투명 - 반응형 배너 로테이터/슬라이더
대부분의 jQuery 슬라이더에는 고유한 디자인이 있습니다. 직접 사용자 정의할 수 있지만 때로는 모든 것이 슬라이더 안에 있기를 원할 수도 있습니다. 당신의 관심은 반투명으로 표현됩니다.
슬라이더에는 많은 사전 설정이 있습니다. 특정 설정만 지정하면 됩니다. 기회:
6 다른 스타일
4가지 전환 효과
2 스와이프 전환
사용자 정의 가능한 버튼 및 레이블
다른 슬라이더와 마찬가지로 이 슬라이더는 터치가 가능하고 반응이 빠르며 하드웨어 가속. Translucent는 콘텐츠 자체를 최전선에 두는 미니멀한 디자인의 슬라이더입니다.
15. FSS - 전체 화면 슬라이딩 웹사이트 플러그인
슬라이드로 전체 화면 사이트를 만들고 싶습니까? 그런 다음 FSS가 필요합니다.
사실, 이 jQuery 슬라이더를 사용하여 전체 화면 슬라이더 사이트를 만드는 것은 매우 쉽습니다. 기회:
AJAX 지원
스크롤 바
딥링킹 기술 지원
2가지 다른 전환 효과
또한 키보드 지원과 11페이지 가이드에 주의를 기울일 가치가 있습니다. 그러나 실제 인상은 FSS의 무게, 불과 5Kb입니다.
16. Zozo Accordion - 반응형 터치스크린 슬라이더
작업을 잘 수행하는 스타일 중심 jQuery 슬라이더의 또 다른 예입니다. Zozo Accordion은 스타일을 변경할 수 있는 우수한 아코디언 슬라이더를 찾는 사람에게 필수품입니다.
이 CSS3 애니메이션의 아름다움에는 다음과 같은 매우 다양한 기능도 있습니다.
수평 및 수직 아코디언
시맨틱 HTML5 및 SEO 최적화
터치, 키보드 및 WAI-ARIA 지원
10가지 이상의 스킨과 6가지 레이아웃
그리고 훨씬 더
조조 아코디언 무료 지원 jQuery 아코디언에서 보고 싶은 모든 기능과 지속적인 업데이트.
17.jQuery 반응형 OneByOne 슬라이더 플러그인
jQuery 반응형 OneByOne 슬라이더 플러그인은 슬라이더보다 단순한 애니메이션에 가깝습니다. 한 번에 하나의 슬라이드를 표시하는 대신 이 인스턴스는 다음 슬라이드로 이동하기 전에 해당 영역에 공간이 남지 않을 때까지 슬라이드로 화면을 점진적으로 채웁니다.
CSS3 애니메이션은 Animate.css에서 작동하며 가볍고 여러 레이어로 구성되어 있습니다. 모바일 기기. 여러 기능:
드래그 앤 드롭 탐색 옵션도 있습니다. 그리고 드롭. jQuery 반응형 OneByOne 슬라이더 플러그인은 Twitter Bootstrap 캐러셀에 의해 구동됩니다.
18. Accordionza - jQuery 플러그인
이보다 쉬운 jQuery 슬라이더는 없습니다. 3Kb의 슬라이더만 사용하면 Accordionza가 가장 가벼운 아코디언 유형 슬라이더가 됩니다.
세 가지 스타일 옵션이 마음에 들지 않으면 HTML과 CSS를 직접 조정할 수 있습니다. 기회:
키보드 탐색
효과 및 버튼을 쉽게 사용자 정의
점진적 향상 기술 - JavaScript 없이 작동
Accordionza는 혼합 콘텐츠의 다양한 변형을 표시할 수 있으므로 매우 유연합니다.
19. MightySlider - 반응형 다목적 슬라이더
MightySlider는 정말 강력한 슬라이더입니다. 단순한 이미지 슬라이더뿐만 아니라 메뉴 항목 탐색이 있는 전체 화면 단방향 슬라이더로도 사용할 수 있습니다. 그것으로, 당신은 훌륭한 한 페이지 웹사이트를 만들 수 있습니다.
후드 아래에는 많은 옵션이 있습니다.
키보드, 마우스 및 터치 지원
CSS3 하드웨어 가속 전환
유효한 마크업 및 SEO 최적화 정리
무제한 슬라이드, 캡션 레이어 및 효과
API는 매우 강력하고 개발자 친화적이며 다양한 방법그것의 사용. MightySlider는 깨끗하고 주석 처리가 잘 된 코드가 포함된 우수한 프로그레시브 jQuery 슬라이더입니다.
20. 시차 슬라이더 - 반응형 jQuery 플러그인
Parallax Slider는 jQuery Responsive OneByOne Slider 플러그인처럼 작동하며 동일한 슬라이드 내에서 각 레이어를 개별적으로 애니메이션할 수 있습니다. 시차 애니메이션을 추가하여 모든 슬라이드 또는 하나만 애니메이션할 수 있습니다.
4개의 슬라이더와 함께 제공 다른 유형, 모두 시차 효과가 있습니다. 다른 jQuery 슬라이더와 마찬가지로 다음이 있습니다.
완전한 사용자화
터치 지원
완전히 반응하는 무제한 레이어
자동 재생, 반복, 높이 및 너비 조정, 타이머
애니메이션 레이어는 단순한 텍스트나 이미지가 아닙니다. YouTube, Vimeo 및 HTML5 동영상을 추가할 수도 있습니다. Parallax Slider는 모든 장치에서 지원되는 Flash 자체보다 Flash 효과를 훨씬 더 잘 시뮬레이션할 수 있는 방법의 또 다른 좋은 예입니다.
결론
jQuery 슬라이더가 단순히 한 이미지를 다른 이미지로 대체하는 것에서 거대한 크리에이티브 도구 세트로 성장한 방법을 보는 것은 흥미로울 것입니다. 이제 3D 슬라이더, 시차 슬라이더, 전체 페이지 슬라이더, 반응형 슬라이더 및 데스크톱 컴퓨터와 스마트폰 모두에서 볼 수 있는 슬라이더가 있습니다.
이 목록의 슬라이더가 마음에 들지 않으면 언제든지 Envato의 jQuery 코드 자습서를 살펴보고 완전히 새롭고 독특한 것을 개발할 수 있습니다.
또는 Envato Market에서 다른 슬라이더를 확인하여 선택할 수 있습니다. 가장 좋아하는 jQuery 슬라이더는 무엇이며 그 이유는 무엇입니까?
1. 우수한 jQuery 슬라이드쇼
jQuery 기술을 사용한 멋진 슬라이드쇼.
2. jQuery 플러그인 "스케일 캐러셀"
jQuery를 사용하여 확대/축소 가능한 슬라이드쇼. 가장 적합한 슬라이드쇼의 크기를 설정할 수 있습니다.
3. jQuery 플러그인 "slideJS"
텍스트 설명이 있는 이미지 슬라이더.
4. 플러그인 "JSliderNews"
5. CSS3 jQuery 슬라이더
탐색 화살표 위로 마우스를 가져가면 다음 슬라이드의 둥근 축소판이 나타납니다.
6. 예쁜 jQuery "프레젠테이션 주기" 슬라이더
이미지 로딩 표시기가 있는 jQuery 슬라이더. 자동 슬라이드 변경이 제공됩니다.
7. jQuery 시차 슬라이더 플러그인
3D 배경 효과가 있는 슬라이더입니다. 이 슬라이더의 하이라이트는 각각 다른 속도로 스크롤되는 여러 레이어로 구성된 배경의 움직임입니다. 결과는 체적 효과의 모방입니다. 그것은 매우 멋지게 보입니다. 직접 볼 수 있습니다. 효과는 다음과 같은 브라우저에서 더 부드럽게 표시됩니다. Opera, 구글 크롬.즉.
8. 신선하고 가벼운 jQuery 슬라이더 "bxSlider 3.0"
"예시" 섹션의 데모 페이지에서 모든 링크를 찾을 수 있습니다. 가능한 옵션이 플러그인을 사용합니다.
9. jQuery 이미지 슬라이더 플러그인 "slideJS"
세련된 jQuery 슬라이더는 확실히 프로젝트를 꾸밀 수 있습니다.
10. jQuery 슬라이드쇼 플러그인 "Easy Slides" v1.1
쉬운 jQuery를 사용하여슬라이드쇼 플러그인.
11. "jQuery 슬라이드" 플러그인
다양한 디자인의 경량 jQuery 플러그인. 자동 슬라이드 변경이 제공됩니다.
12. 자동 슬라이드 전환 기능이 있는 jQuery CSS 갤러리
방문자가 일정 시간 동안 앞으로 또는 뒤로 화살표를 클릭하지 않으면 갤러리가 자동으로 스크롤되기 시작합니다.
13. jQuery 니보 슬라이더
유효한 코드가 포함된 매우 전문적인 품질의 경량 플러그인입니다. 다양한 슬라이드 전환 효과가 있습니다.
14. jQuery 모바일 슬라이더
신선한 슬라이더. 다양한 이미지 전환 효과가 있는 jQuery 슬라이더.
15. jQuery 슬라이더² 플러그인
자동 슬라이드 변경 기능이 있는 경량 슬라이더.
16. 신선한 자바스크립트 슬라이더
자동 이미지 변경 슬라이더.
자동 슬라이드 변경 기능이 있는 슬라이드쇼 구현을 위한 플러그인입니다. 이미지 썸네일을 사용하여 디스플레이를 제어할 수 있습니다.
제이쿼리 CSS NivoSlider 플러그인을 사용하는 이미지 슬라이더.
19. jQuery "jShowOff" 슬라이더
콘텐츠 회전 플러그인. 세 가지 사용 사례: 탐색 없음(슬라이드쇼 형식의 자동 변경 포함), 버튼 탐색, 이미지 축소판 탐색.
20. 셔터 효과 포트폴리오 플러그인
사진 작가의 포트폴리오 디자인을 위한 신선한 jQuery 플러그인. 갤러리는 이미지를 바꾸는 흥미로운 효과가 있습니다. 사진은 렌즈 셔터의 작동과 유사한 효과로 서로를 따릅니다.
21. 경량 자바스크립트 CSS 슬라이더 "TinySlider 2"
다음을 사용하여 이미지 슬라이더 구현 자바 스크립트를 사용하여그리고 CSS.
22. 굉장한 슬라이더 "Tinycircleslider"
세련된 원형 슬라이더. 이미지 간 전환은 원주 주위에 빨간색 원 형태로 슬라이더를 드래그하여 수행됩니다. 디자인에 둥근 요소를 사용하면 사이트에 완벽하게 맞습니다.
23. jQuery 이미지 슬라이더
경량 슬라이더 키트. 슬라이더는 수직 및 수평의 다양한 버전으로 제공됩니다. 이미지 간의 다양한 탐색 유형도 구현됩니다. "앞으로" 및 "뒤로" 버튼 사용, 마우스 휠 사용, 슬라이드에서 마우스 클릭 사용.
24. 슬라이더 키트 썸네일 갤러리
슬라이더 키트 갤러리. 축소판은 세로 및 가로로 모두 스크롤됩니다. 이미지 간 전환은 마우스 휠, 마우스 클릭 또는 축소판 위로 마우스를 가져가는 방법을 사용하여 수행됩니다.
25. jQuery 콘텐츠 슬라이더 "슬라이더 키트"
jQuery 수직 및 수평 콘텐츠 슬라이더.
26. jQuery 슬라이더 키트 슬라이드쇼
자동 슬라이드 변경 기능이 있는 슬라이드쇼.
27. 경량 전문 자바스크립트 CSS3 슬라이더
2011년에 만들어진 깔끔한 jQuery와 CSS3 슬라이더.
jQuery 썸네일 슬라이드쇼.
29. 간단한 jQuery 슬라이드쇼
탐색 버튼이 있는 슬라이드쇼.
30. 굉장한 jQuery Skitter 슬라이드쇼
놀라운 슬라이드쇼를 만들기 위한 jQuery "Skitter" 플러그인. 플러그인은 이미지 변경 시 22가지(!) 유형의 다양한 애니메이션 효과를 지원합니다. 슬라이드 번호 사용 및 축소판 사용의 두 가지 슬라이드 탐색 옵션과 함께 작동할 수 있습니다. 매우 높은 품질의 데모를 확인하십시오. 사용 기술: CSS, HTML, jQuery, PHP.
31. 어색한 슬라이드쇼
기능적인 슬라이드쇼. 슬라이드는 간단한 이미지, 캡션이 있는 이미지, 도구 설명이 있는 이미지, 비디오 클립이 될 수 있습니다. 키보드의 화살표, 슬라이드 번호 링크 및 오른쪽/왼쪽 키를 사용하여 탐색할 수 있습니다. 슬라이드 쇼는 미리보기 이미지가 있는 버전과 없는 버전 등 여러 버전으로 만들어집니다. 모든 옵션을 보려면 데모 페이지 상단에 있는 데모 #1 - 데모 #6 링크를 클릭하십시오.
부채를 연상시키는 이미지 슬라이더의 매우 독창적인 디자인. 애니메이션 슬라이드 전환. 이미지 간의 탐색은 화살표를 사용하여 수행됩니다. 상단에 위치한 재생/일시정지 버튼을 이용하여 켜고 끌 수 있는 자동 변경도 있습니다.
애니메이션 jQuery 슬라이더. 브라우저 창의 크기가 조정되면 배경 이미지의 크기가 자동으로 조정됩니다. 각 이미지에 대해 설명이 있는 블록이 나타납니다.
34. jQuery 및 CSS3의 "플럭스 슬라이더" 슬라이더
새로운 jQuery 슬라이더. 슬라이드를 변경할 때 몇 가지 멋진 애니메이션 효과.
35. jQuery 플러그인 "jSwitch"
애니메이션 jQuery 갤러리.
자동 슬라이드 변경 기능이 있는 간편한 jQuery 슬라이드쇼.
37. 플러그인 "SlideDeck 1.2.2"의 새 버전
전문적인 콘텐츠 슬라이더. 자동 슬라이드 변경 옵션과 마우스 휠을 사용하여 슬라이드 사이를 이동하는 옵션이 있습니다.
38. jQuery Sudo 슬라이더
경량 jQuery 이미지 슬라이더. 구현을 위한 많은 옵션이 있습니다: 이미지의 가로 및 세로 변경, 슬라이드 번호에 대한 링크가 있는 경우와 없는 경우, 이미지 캡션이 있는 경우와 없는 경우, 다양한 이미지 변경 효과. 자동 슬라이드 변경 기능이 있습니다. 모든 구현 예제에 대한 링크는 데모 페이지에서 찾을 수 있습니다.
39. jQuery CSS3 슬라이드쇼
썸네일이 있는 슬라이드 쇼는 자동 슬라이드 전환 모드를 지원합니다.
40. jQuery 플럭스 슬라이더
많은 이미지 변경 효과가 있는 슬라이더.
41. 간단한 jQuery 슬라이더
세련된 jQuery 이미지 슬라이더.
슬라이더 프로- 적응 제이쿼리자체 API를 포함하여 썸네일 및 기타 설정을 지원하는 슬라이더.
- 기본 슬라이더는 화면 크기에 맞게 조정됩니다. 이미지뿐만 아니라 추가 콘텐츠가 포함된 레이어의 크기도 조정됩니다.
- 터치 스크린에 대한 터치 스와이프 이벤트 지원. CSS 미디어 쿼리와 유사한 중단점을 사용하여 다양한 화면 크기에서 슬라이더 설정을 변경합니다.
- CSS3 전환, 레이어 애니메이션, 슬라이드 변경을 위한 페이드 효과가 있는 부드러운 애니메이션.
- 슬라이더는 전체 너비, 전체 화면 또는 컨테이너 내부일 수 있습니다.
- 슬라이드 높이 자동 변경. 축소판 방향은 수직 또는 수평이 될 수 있습니다.
- 이미지의 경우 지연 로딩, 레티나, 특정 화면 크기에 대한 다양한 이미지 로딩 기능을 지원합니다.
- 비디오 지원, 라이트박스 통합, 화살표, 점, 키보드, 썸네일 등을 사용한 탐색.
CSS
스타일 파일 연결:
HTML
슬라이더 삽입을 위한 마크업 예:
JS
필요한 스크립트를 연결합니다.
플러그인을 초기화해 보겠습니다.
슬라이더와 사용법에 대한 자세한 내용은 github에서 확인할 수 있습니다. 아래 링크.
