> >

슬라이더 스타일

덕분에 버튼이 대신합니다. 절대 위치 container.slider-box에 상대적

슬라이더 상자( 위치 : 상대 ; 너비 : 320픽셀 ; 높이 : 210픽셀 ; 오버플로 : 숨김 ; ) .slider( 위치 : 상대 ; 너비 : 10000픽셀 ; 높이 : 210픽셀 ; ) .slider img( float : 왼쪽 ; ) .slider-box .prev , .slider-box .next( position : absolute ; top : 100px ; display : block ; width : 29px ; height : 29px ; cursor : pointer ; ) .slider-box .prev( left : 10px ; background : url ( ../images/slider_controls.png ) no-repeat 0 0 ; ) .slider-box .next( right : 10px ; background : url (../images/slider_controls.png ) no-repeat -29px 0 ; )

스크립트

슬라이더가 자동으로 스크롤됩니다. 기본적으로 이동은 왼쪽에서 오른쪽으로 진행되지만 필요한 경우 코스 변수를 사용하여 이동 방향을 변경할 수 있습니다. 변수 값을 1에서 -1로 변경하면 슬라이더의 방향이 변경됩니다.

슬라이더의 이미지는 커서가 슬라이더 안에 있을 때 변경되지 않아야 합니다. 무엇을 위한 것입니까? 모든 것이 간단합니다. 마우스 커서가 슬라이더에 있으면 사이트 방문자가 콘텐츠에 관심이 있음을 의미합니다. 이때 슬라이드를 자동으로 변경하지 마십시오.

$(함수() ( var 슬라이더 = $(".slider" ) , 슬라이더 콘텐츠 = 슬라이더.html () , // 슬라이더 내용슬라이드 폭 = $(".slider-box") .outerWidth() , // 슬라이더 너비 SlideCount = $(".slider img") .length, // 슬라이드 수 prev = $(".slider-box .prev" ) , // 뒤로 버튼 다음 = $(".slider-box .next" ) , // 앞으로 버튼슬라이더 간격 = 3300, // 슬라이드 변경 간격애니메이션 시간 = 1000, // 슬라이드를 변경할 시간코스 = 1 // 슬라이더 이동 방향(1 또는 -1)여백 = - 슬라이드 너비; // 초기 슬라이드 오프셋$(".slider img:last" ) .clone () .prependTo (".slider" ) ; // 마지막 슬라이드의 복사본이 시작 부분에 배치됩니다.$(".slider img" ) .eq (1 ) .clone () .appendTo (".slider" ) ; // 첫 번째 슬라이드의 복사본이 끝에 배치됩니다.$(".slider" ) .css("왼쪽 여백" , - 슬라이드 폭) ; // Container.slider는 한 슬라이드 너비만큼 왼쪽으로 이동합니다.함수 nextSlide() ( // animation() 함수를 실행하여 슬라이드 전환을 수행합니다.간격 = window.setInterval(애니메이션, 슬라이더 간격) ; ) 함수 animate() ( if (margin==- slideCount* slideWidth-slideWidth) ( // 슬라이더가 끝에 도달한 경우슬라이더.css(( "marginLeft" :-slideWidth) ) ; // 그런 다음 block.slider는 초기 위치로 돌아갑니다.여백=- 슬라이드폭* 2 ; ) else if (여백== 0 && 코스==- 1 ) ( // 슬라이더가 시작 부분에 있고 뒤로 버튼을 누른 경우 Slider.css (( "marginLeft" :-slideWidth* slideCount) ) ; // 그런 다음 block.slider가 최종 위치로 이동합니다.여백=- 슬라이드폭* 슬라이드카운트+ 슬라이드폭; ) 또 다른 ( // 위의 조건이 실패하면여백 = 여백 - SlideWidth* (코스) ; // 여백 값은 다음 슬라이드를 표시하도록 설정됩니다.) 슬라이더 애니메이션(( "marginLeft" : margin) , animateTime) ; // Block.slider가 왼쪽으로 1슬라이드 이동합니다.) 함수 슬라이더 중지()( // 슬라이더를 멈추는 함수 window.clearInterval(간격); )prev.click(함수()( // 뒤로 버튼 눌림 var 코스2 = 코스; 코스 = - 1 ; 애니메이션() ; // animate() 함수 호출코스 = 코스2 ; ) ) ; next.click(함수()() // 뒤로 버튼 눌림 if (slider.is (":animated" ) ) ( false 반환 ; ) // 애니메이션이 발생하지 않는 경우 var 코스2 = 코스; // 물론 값을 저장할 임시 변수코스 = 1 ; // 슬라이더 방향을 오른쪽에서 왼쪽으로 설정애니메이션() ; // animate() 함수 호출코스 = 코스2 ; // 코스 변수는 원래 값으로 돌아갑니다.) ) ; Slider.add(다음) .add(이전) .hover(함수()( // 마우스 커서가 슬라이더 안에 있는 경우슬라이더스톱() ; // 슬라이더를 일시 중지하기 위해 SliderStop() 함수가 호출됩니다.) , 다음슬라이드); // 커서가 슬라이더를 벗어나면 애니메이션이 다시 시작됩니다.다음슬라이드() ; // nextSlide() 함수 호출 } ) ;

"앞으로"및 "뒤로"버튼이있는 슬라이더가 나타났습니다.

작성자:스크롤 없이 볼 수 있는 웹 페이지 부분의 "죽음"에 대한 소문에도 불구하고 좋은 슬라이더의 필요성은 어디에서도 사라지지 않았습니다. 잠시만 솔직해 봅시다. 슬라이더는 재미있습니다. 또한 움직이는 콘텐츠와 달리 사용자에게 "와우" 효과를 주는 것은 없습니다. 모든 슬라이더는 서로를 대체하는 여러 슬라이드의 집합이며 슬라이더 코드는 가능한 한 가볍게 하는 것이 매우 중요합니다. 여기에서 jQuery가 유용합니다.

Envato Market에서 20개의 jQuery 슬라이더를 살펴보면 단순한 슬라이더 블록 이상의 슬라이더가 있음을 알 수 있습니다.

1. RoyalSlider - jQuery를 사용한 터치스크린 이미지 갤러리

이제 터치스크린 친화적이기도 한 반응형 슬라이더는 예전보다 훨씬 더 많은 것을 의미합니다. RoyalSlider는 적응성과 터치 스크린 작업이라는 두 가지 기능을 결합합니다. 갤러리가 HTML5 및 CSS3으로 작성되었으므로 좋은 선택입니다.

몇 가지 흥미로운 기능:

웹 사이트를 직접 만드는 방법은 무엇입니까?

SEO 최적화

높은 사용자 정의

10개 이상의 시작 템플릿

CSS3 전환에 대한 대체가 있습니다.

제 생각에 가장 멋진 기능은 "모듈식 스크립트 아키텍처"입니다. 이를 통해 기본 JS 파일에서 불필요한 것을 비활성화하여 무게를 줄일 수 있습니다. jQuery 터치스크린 이미지 갤러리인 RoyalSlider는 모든 개발자의 툴킷에 반드시 있어야 하는 강력한 JavaScript 슬라이더입니다.

2. Slider Revolution 반응형 jQuery 플러그인

슬라이더로 "혁신적인" 작업을 수행하는 것은 쉽지 않습니다. 슬라이더와 관련하여 추가할 수 있는 기능이 너무 많습니다. 그러나 Slider Revolution은 정말 좋은 시도입니다. jQuery 슬라이더 중에서 이 인스턴스는 가능한 모든 요구 사항을 충족합니다.

슬라이더 기능 목록이 너무 길어서 가장 좋은 것만 나열하겠습니다.

시차 효과 및 사용자 정의 애니메이션

링크가 있는 무제한 레이어 및 슬라이드

바로 사용할 수 있는 맞춤형 스타일

그리고 훨씬 더

이미지, 내장 비디오 플레이어 및 링크 추가 가능 소셜 네트워크 Slider Revolution은 웹에서 가장 유연하고 사용자 정의 가능한 옵션 중 하나입니다.

3. LayerSlider 반응형 jQuery 슬라이더 플러그인

"LayerSlider Responsive jQuery Slider Plugin"이라는 제목은 이 슬라이더를 제대로 설명하지 못합니다.
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 Carousel Evolution은 다양한 용도로 사용되는 간단한 회전 목마입니다.

12 섹시한 슬라이더

섹시한 슬라이더는 이전만큼 섹시하지 않습니다. 그러나 나이 때문에 이 슬라이더는 신뢰할 수 있습니다.

언뜻 보기에는 슬라이더가 그다지 인상적이지 않지만 잘 구성되어 있으면 디자인에 완벽하게 들어 맞습니다. 기능:

슬라이드 자동 재생

이미지 캡션

연속 슬라이드 재생

6가지 전환 효과

Sexy Slider는 당신이 그 모든 힘을 발휘하고 잠재력을 발휘하기를 기다리고 있습니다.

13. 라이트박스가 포함된 jQuery 이미지 및 콘텐츠 스크롤러

이러한 모든 모바일 친화적인 디자인과 지원으로 터치 스크린잊지 않은 jQuery 슬라이더를 보니 반갑습니다. 데스크탑 컴퓨터.

jQuery Image & Content Scroller w/ Lightbox는 무엇보다도 키보드 입력과 마우스 휠을 지원합니다.

수평 및 수직 방향

슬라이더 내부 또는 외부의 텍스트 캡션

한 번에 볼 수 있는 특정 수의 슬라이드를 설정하는 기능

인라인 이미지, 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 동영상을 추가할 수도 있습니다. 시차 슬라이더 - 또 다른 것 좋은 예모든 장치에서 지원되는 Flash 자체보다 Flash 효과를 훨씬 더 잘 시뮬레이션할 수 있는 방법.

결론

jQuery 슬라이더가 단순히 하나의 이미지를 다른 이미지로 대체하는 것에서 거대한 창의적 도구 세트로 성장한 방법을 보는 것은 흥미로울 것입니다. 이제 3D 슬라이더, 시차 슬라이더, 전체 페이지 슬라이더, 반응형 슬라이더 및 데스크톱 컴퓨터와 스마트폰 모두에서 볼 수 있는 슬라이더가 있습니다.

이 목록의 슬라이더가 마음에 들지 않으면 언제든지 Envato의 jQuery 코드 자습서를 살펴보고 완전히 새롭고 독특한 것을 개발할 수 있습니다.

또는 Envato Market에서 다른 슬라이더를 확인하여 선택할 수 있습니다. 가장 좋아하는 jQuery 슬라이더는 무엇이며 그 이유는 무엇입니까?