이 문서에서는 자동 뒤집기를 사용하여 이미지 또는 텍스트 슬라이더를 구현하고 생성하는 방법을 설명합니다. 슬라이더 기능을 사용하면 슬라이드 간의 전환 간격, 속도, 변경 효과를 설정하고 목록에서 특정 슬라이드를 선택할 수 있습니다. 이 예에서는 이미지를 변경하는 고전적인 방법, 즉 슬라이드의 모양과 사라짐이 사용되었습니다.

시간목록- 슬라이드 전환 속도

시간보기- 쇼타임

라디오하지만- 빠른 탐색을 위한 슬라이드 아래의 버튼(라디오 버튼). 기본 진실의미를 가질 수 있다 거짓.

이제 시작해보자! 파일을 생성하고 열어보자 index.htm

제목 1

설명...

제목 2

설명...

제목 3

설명...

제목 4

설명...

주목! 이 예에서는 슬라이드가 작동하도록 텍스트가 사용됩니다. 이미지를 사용하려면 각 사진을 태그에 넣으세요.

보시다시피 제시된 코드에는 복잡한 것이 없습니다. 슬라이더 랩슬라이더의 전체 위치를 결정하고 화면 중앙에 정렬합니다. 매개변수 슬라이더속성을 사용하여 슬라이드의 위치를 지정하고 높이를 설정합니다. 키. 이미지 슬라이더를 사용하는 경우 이 속성에서 그림의 높이를 지정하고, 그림의 높이가 다른 경우 최대값을 지정합니다.

최상의 슬라이더 시각화 및 매력을 위해서는 동일한 이미지 해상도를 사용하십시오.

이제 슬라이더의 스타일을 지정해야 합니다. 슬라이드 전환을 위한 앞으로/뒤로 화살표와 슬라이더 아래의 라디오 버튼이 그림 형태로 사용되며 파일에 포함되어 있습니다. 파일을 생성하고 열어보자 스타일.css거기에 필요한 마크업을 작성합니다.

@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto"); html, 본문( 높이: 100%; ) 본문( 색상: #4f4f5a; 글꼴 계열: "Roboto", sans-serif; 글꼴 크기: 16px; 패딩: 0; 여백: 0; ) #slider-wrap( 최대 -너비:650px; 여백: 100px 자동; ) #slider (위치:상대; 높이: 200px; 오버플로: 숨김; 테두리:#fafafa solid 10px; ) .slide (너비:100%; 높이: 100%; 위치: 절대 ; 상단: 0; 왼쪽: 0; 텍스트 정렬: 중앙; 상단: 인라인 블록: 16px; 배경: url("radioBg.png") 텍스트 들여쓰기: -99999px; ctrl-select:hover ( 커서: 포인터; 배경 위치: 중앙 중앙; ) .Radio-But .ctrl-select.active( 배경 위치: 중앙 상단; ) #prewBut, #nextBut( 디스플레이: 블록; 너비: 40px, 높이: 100%, 위치: 절대 상단: 0, 텍스트 들여쓰기: -99999px, 배경: url("arrowBg.png") 왼쪽 가운데 반복 없음;

불투명도: 0.5; Z-인덱스: 3;개요: 없음!중요; ) #prewBut ( 왼쪽: 10px; ) #nextBut ( 오른쪽: 10px; 배경: url("arrowBg.png") 오른쪽 중앙 no-repeat; ) #prewBut:hover, #nextBut:hover ( 불투명도: 1; ) 앞으로/뒤로 화살표가 슬라이더의 가시성을 방해하는 경우 슬라이더를 보이지 않게 할 수 있으며 슬라이더 위로 마우스를 가져갈 때만 나타납니다. 매개변수에서준비하지만 그리고다음하지만

, 속성을 설정 불투명값 0. 우리를 만들고 열어 봅시다개요: 없음!중요; ) #prewBut ( 왼쪽: 10px; ) #nextBut ( 오른쪽: 10px; 배경: url("arrowBg.png") 오른쪽 중앙 no-repeat; ) #prewBut:hover, #nextBut:hover ( 불투명도: 1; ) js 파일.

$(document).ready(function () ( var timeList = 300; var TimeView = 5000; var RadioBut = true; $(".slide").hide().eq(0).show(); var SlideNum = 0; var SlideTime; SlideCount = $("#slider .slide").length; var animSlide = function(arrow)(clearTimeout(slideTime); function SlideDirectionHide(slideFloatNum, directTo)( $(".slide").eq( SlideFloatNum).fadeOut(timeList); ) function SlideDirectionShow(slideFloatNum, directTo, Pause)( $(".slide").eq(slideFloatNum).fadeIn(timeList, function() ( if(pause == true) ( rotator( ) )); ) var old_slideNum = SlideNum; if(arrow == "next")( SlideDirectionHide(slideNum, "left"); if(slideNum == (slideCount-1))(slideNum=0;) else( SlideNum++) SlideDirectionShow(slideNum, "right", true ) else if(arrow == "prew") ( SlideDirectionHide(slideNum, "right"); if(slideNum == 0)(slideNum=slideCount-1;) else (slideNum -=1) SlideDirectionShow(slideNum, "왼쪽", true )else( if(arrow !== old_slideNum) ( if(arrow > old_slideNum) ( SlideDirectionHide(slideNum, "left");< old_slideNum) { slideDirectionHide(slideNum, "right"); slideNum = arrow; slideDirectionShow(slideNum, "left", true); } } } $(".ctrl-select.active").removeClass("active"); $(".ctrl-select").eq(slideNum).addClass("active"); } if(RadioBut){ var linkArrow = $("<>SlideNum = 화살표; SlideDirectionShow(slideNum, "right", true);"; }); $("

)else if(화살표

").prependTo("#slider"); $("#nextBut").click(function())( animSlide("next"); return false; )) $("#prewBut").click(function( ) ( animSlide("prew"); return false; )) ) var addSpan ="" $(".slide").each(function(index) ( addSpan += "< prevX) { animSlide("next"); clearTimeout(slideTime); } if(e.clientX >" + 색인 + "

"+스팬 추가+" ").appendTo("#slider-wrap"); $(".ctrl-select:first").addClass("active"); $(".ctrl-select").click(function())( var goToNum = parsFloat($(this).text()); animSlide(goToNum )); var Pause = function())( if(!pause)(slideTime = setTimeout(function())(animSlide(" next")) , TimeView);) ) $("#slider-wrap").hover(function())(clearTimeout(slideTime); Pause = true;), function())(pause = false; rotator(); ) ); var click = false; var prevX; $(".slide").mousedown(function(e)( click = true; prevX = e.clientX; )) $(".slide").mouseup( ) ( click = false; )); $(document).mouseup(function())( click = false; )) $(".slide").mousemove(function(e)( if(clicking == true) (e.clientX prevX) ( animSlide("prew");clearTimeout(slideTime); ) click = false; ) ));, $(".slide").hover().css("커서", "포인터");회전자(); ))); ) ));기능 $(".slide").hover().css("커서", "포인터");애니메이션슬라이드 세 가지 유형의 값을 허용합니다.개요: 없음!중요; ) #prewBut ( 왼쪽: 10px; ) #nextBut ( 오른쪽: 10px; 배경: url("arrowBg.png") 오른쪽 중앙 no-repeat; ) #prewBut:hover, #nextBut:hover ( 불투명도: 1; ) 슬라이드방향표시거의 유사하고 동일하며 첫 번째는 슬라이드의 사라지고 나가는 슬라이드의 이동 방향을 담당하고, 두 번째는 슬라이드의 모양, 나타날 때의 이동 방향 및 지정된 표시 시간을 담당합니다. 간격.

슬라이더 위에 마우스를 올리면 디스플레이가 일시 중지됩니다.

그게 전부입니다. 명확하지 않거나 질문이 있으면 글을 쓰고 질문하세요.

게시물 댓글에서 그들은 최근 게시물을 만드는 데 필요한 온라인 서비스가 있는지 물었습니다. 원칙적으로 프로젝트가 널리 사용되는 CMS(WordPress, Drupal) 중 하나에서 실행되는 경우 해당 플러그인이 있어야 합니다. 하지만 사이트가 HTML로 작성되었거나 적합한 모듈이 없으면 어떻게 해야 할까요? 오늘은 이 문제를 해결하기 위한 몇 가지 옵션에 대해 설명하겠습니다.

일반적으로 슬라이더를 만드는 방법은 다릅니다. 제가 TYPO3를 사용했을 때 이미지를 자동으로 플래시로 변환하여 사이트에 표시하는 모듈이 있었던 기억이 납니다. 유사한 플래시 드라이브를 만들거나 필요한 HTML + CSS 코드를 생성할 수 있는 특수 데스크톱 프로그램도 있습니다. 요즘 슬라이더는 주로 Javascript 및 해당 라이브러리(예: jQuery)를 사용하여 구현됩니다. 그 외에도 다양한 스크립트가 있습니다. 그 중 몇 가지를 살펴보겠습니다.

온라인으로 슬라이더를 만드는 훌륭한 서비스입니다. 크기, 효과, 탐색 등 거의 모든 설정을 대화형 편집에 사용할 수 있습니다. 사진을 업로드하고 필요한 옵션을 선택한 다음 미리 만들어진 슬라이더 코드를 다운로드하기만 하면 됩니다. 이 모든 것은 무료입니다. 최종 HTML에는 이 서비스에 대한 링크가 포함되어 있지만 이론적으로는 이미지에 추가 워터마크가 없습니다. 개발자분들을 존경합니다!

컴사이더

ComSider는 웹사이트를 위한 또 다른 무료 온라인 슬라이더 생성기입니다. 작동 원리는 유사하며 사진 업로드, 슬라이더 템플릿 선택 및 설정, 웹 사이트에 코드 통합의 3단계로 구성됩니다. 슬라이더 템플릿을 사용하면 다양한 디자인의 요소를 만들 수 있습니다. 동시에 서비스에는 실제로 원하는 결과를 얻기 위한 많은 효과 설정과 기타 옵션이 있습니다. 사이트에서는 파일을 다운로드하지 않고도 코드를 삽입할 수 있거나 파일을 다운로드하여 슬라이더를 직접 통합할 수 있다고 말합니다.

신코파

Cincopa는 HTML 슬라이더를 생성할 수 있는 매우 훌륭한 서비스이지만, 불행하게도 완전 무료는 아닙니다. 이는 특별 요금제를 이용할 수 있는 많은 유사한 프로젝트 중 하나입니다. 무료 버전의 경우 원칙적으로 다운로드 이미지 개수, 트래픽, 워터마크(최악)에 다양한 제한이 추가됩니다. 또한 많은 디자인 테마, 설정, 인기 있는 CMS용 플러그인, 기술 지원 등 모든 것이 훌륭하게 구현되었습니다. 여기서는 관세를 살펴봐야 합니다. 일부 서비스에서는 상당히 저렴할 수 있습니다.

이 서비스는 무료 요금제에 이미지에 워터마크가 포함되지 않는 몇 안되는 서비스 중 하나입니다. 가능한 효과의 수만 제한되어 있지만 이는 중요하지 않습니다. 다양한 설정과 WordPress용 특수 플러그인이 있습니다. 전반적으로 좋은 결정입니다.

HTML5Maker

HTML5Maker는 구독 기반으로 운영되는 유료 서비스의 또 다른 예입니다. 무료 버전에서는 워터마크를 넣어야 하지만 스타터 요금제를 사용하면 워터마크를 제거할 수 있습니다. 동시에 비교적 저렴한 가격(월 $5)을 제공하며 모든 효과와 많은 템플릿이 포함된 슬라이더를 최대 3개까지 만들 수 있습니다.

미끄러운

슬라이더가 있는 다음 유형의 사이트는 Slipry와 같이 바로 사용할 수 있는 스크립트가 포함된 프로젝트입니다. 사진을 업로드하고 설정을 지정하는 데 편리한 양식은 없지만 모든 것이 무료입니다. HTML 슬라이더 코드를 호스팅에 업로드하고 사이트와 수동으로 통합합니다. 개발자 페이지에는 일반적으로 스크립트 사용에 대한 문서, 코드 설명 및 작업 예제가 있습니다.

활주

일반적으로 다양한 유형의 슬라이더가 있습니다. 글라이드(Glide)가 이에 대한 좋은 예입니다. 이 스크립트를 사용하면 사이트 배경에 대한 아름다운 슬라이더를 만들 수 있습니다. 간단하고 빠르며 적응력이 뛰어납니다.

토스러스

TosRus는 또 다른 흥미로운 슬라이더로, 기존 구현과는 다소 다르며 갤러리에 더 가깝습니다(그럼에도 불구하고 유용합니다). 일반 컴퓨터와 스마트폰 모두에서 정상적으로 표시됩니다. 사진을 클릭하면 전체 창으로 열리고 슬라이더도 있습니다. 이미지 삽입뿐만 아니라 비디오와 함께 HTML 콘텐츠 삽입도 지원합니다.

스크립트는 이미지 크기를 완벽하게 조정하므로 생성이 최대한 간단합니다. 사이트에서 예제 코드와 설명을 찾을 수 있습니다. 슬라이더에는 그림 맨 아래에 있는 화살표나 "강조 표시된 요소"를 탐색하는 기능이 있습니다.

시각적으로 웹사이트 슬라이더는 매우 세련되어 보입니다. 탐색 요소와 텍스트 블록이 있습니다. 요소의 일반적인 배경은 슬라이더 자체의 흐릿한 이미지로, 이는 매우 흥미로운 효과를 만들어냅니다.

— 모든 장치에 적합한 jQuery의 적응형 슬라이더입니다. 화면 전체 너비에 걸쳐 표시하거나 별도의 블록에 표시할 수 있습니다. 설명은 매우 "원시적"이지만 알아낼 수 있습니다. 다른 옵션만큼 설정이 많지 않습니다.

이 솔루션은 갤러리에 가깝지만 개인적으로 마음에 들었습니다. 사용 용이성, 사용자 정의 용이성 및 무료는 DesoSlide의 주요 장점입니다. 웹사이트 개발자에게 유용할 수 있습니다.

개발자는 시각적으로 일반 슬라이더와 유사하지만 프로젝트를 jQuery의 무료 갤러리로 배치하고 있습니다. 이 솔루션은 모든 주요 브라우저와 호환되며 이미지 변경에 대한 다양한 효과를 제공합니다. 특정 설정을 실시간으로 적용하여 사이트에서 슬라이더가 어떻게 작동하는지 확인할 수 있는 데모 섹션이 마음에 들었습니다.

— HTML5 및 CSS3의 간단하고 기능적이며 사용자 정의 가능한 jQuery 슬라이더 스크립트입니다. 이 솔루션은 모든 브라우저와 호환되며 반응형 디자인을 지원합니다. 개발자들은 그것을 좋아할 것입니다.

이 솔루션은 여러 장의 사진이 표시되고 자동으로 왼쪽/오른쪽으로 스크롤되는(예: 파트너 로고 라인 또는 작품 표시) 회전형 슬라이더를 만들어야 하는 경우 유용합니다. 저는 최근 WordPress에서 일반 사이트에 대해 이 작업을 구현하는 방법을 살펴보았습니다. jsSimpleSlider 스크립트를 사용해 볼 수 있습니다.

이 서비스는 업로드한 사진에서 플래시 드라이브를 생성하며, 이는 슬라이더 형태로 사이트에 표시됩니다. 이 도구를 사용하는 것은 간단하지만 클래식 슬라이더처럼 보이지는 않습니다(적어도 컨트롤이 부족함). 설정할 수 있는 것은 외부 링크와 전환 효과뿐입니다. 나는 당신이 이 서비스를 사용하지 않을 것이라고 생각합니다. 나는 단지 이 서비스를 작업 구현을 위한 옵션 중 하나로 제시할 뿐입니다.

와우슬라이더

처음에 말했듯이 컴퓨터에는 슬라이더를 만드는 프로그램이 설치되어 있습니다. WOWSlider는 그러한 소프트웨어의 훌륭한 예입니다. 다양한 옵션, 설정, 테마 등이 있습니다. HTML 지식이 필요하지 않습니다. 모든 슬라이더 설정은 빠르고 쉽습니다. 프로그램을 무료로 다운로드할 수 있지만 라이센스를 구매하지 않으면 해당 로고가 슬라이더에 표시됩니다.

CU3OX

CU3OX 프로그램은 이미지 변경에 대한 특이한 3D 효과를 좋아했습니다. 플래시 갤러리와 슬라이더를 만드는 데 사용됩니다. Win과 Mac에서 작동합니다. 다양한 설정, 사진 변경 옵션, 다양한 언어로의 현지화 등이 있습니다. 개인적인 용도로는 무료 버전을 선택할 수 있지만 안타깝게도 워터마크가 포함되어 있습니다.

이러한 서비스, 프로그램 및 슬라이더 스크립트가 충분하지 않은 경우 읽어 보시기 바랍니다. 구현에는 약 100가지의 다양한 옵션이 있습니다. 원칙적으로 모든 것은 기능 요구 사항과 지식에 따라 다릅니다. 맨 처음에 나열된 특수 슬라이더 생성 서비스는 매우 잘 작동하며 무료입니다. 웹 개발에 익숙하다면 기사에 제시된 jQuery 스크립트를 이해할 수 있을 것입니다. 개발이 처음이신 분들에게는 유료 솔루션이 적합합니다. 그 중 일부는 구독을 통해 온라인으로 사용할 수 있고 다른 일부는 데스크톱 프로그램입니다. 후자는 비용이 더 많이 들지만 생성되는 요소 수나 시간 제한에는 제한이 없습니다.

그런데 웹사이트용 슬라이더를 만드는 데 필요한 흥미로운 서비스/스크립트를 알고 있다면 댓글에 해당 서비스/스크립트의 이름과 링크를 적어주세요.

시간은 가만히 있지 않고 진행됩니다. 이는 인터넷에도 영향을 미쳤습니다. 웹 사이트의 모습이 어떻게 변하고 있는지 이미 알 수 있습니다. 적응형 디자인이 특히 인기가 있습니다. 그리고 이와 관련하여 꽤 많은 새로운 것이 나타났습니다. 적응형 jquery 슬라이더, 갤러리, 캐러셀 또는 유사한 플러그인.
1. 반응형 수평 포스트 슬라이더

자세한 설치 지침이 포함된 적응형 수평 캐러셀입니다. 심플한 스타일로 제작되었지만, 자신에게 맞게 스타일을 연출하실 수 있습니다.

2. Glide.js의 슬라이더

이 슬라이더는 모든 웹사이트에 적합합니다. 오픈 소스 Glide.js를 사용합니다. 슬라이더 색상은 쉽게 변경할 수 있습니다.

3. 기울어진 콘텐츠 슬라이드쇼

반응형 콘텐츠 슬라이더. 이 슬라이더의 하이라이트는 이미지의 3D 효과와 무작위 모양의 다양한 애니메이션입니다.

4. HTML5 캔버스를 사용한 슬라이더

대화형 입자가 포함된 매우 아름답고 인상적인 슬라이더입니다. HTML5 캔버스를 사용하여 제작되었으며,

5. 이미지 모핑 슬라이더

모핑 효과가 있는 슬라이더(한 개체에서 다른 개체로의 부드러운 변형) 이 예에서 슬라이더는 포트폴리오 형태의 웹 개발자 또는 웹 스튜디오의 포트폴리오에 매우 적합합니다.

6. 원형 슬라이더

이미지를 뒤집는 효과가 있는 원 형태의 슬라이더입니다.

7. 배경이 흐린 슬라이더

전환 및 배경 흐림 기능이 있는 적응형 슬라이더입니다.

8. 반응형 패션 슬라이더

간단하고 가벼우며 반응성이 뛰어난 웹사이트 슬라이더입니다.

9. Slicebox - jQuery 3D 이미지 슬라이더(업데이트됨)

수정 사항과 새로운 기능이 포함된 Slicebox 슬라이더의 업데이트된 버전입니다.

10.무료 애니메이션 반응형 이미지 그리드

다양한 애니메이션과 타이밍을 사용하여 샷을 전환하는 유연한 이미지 그리드를 생성하는 JQuery 플러그인입니다. 새로운 이미지와 전환을 선택적으로 표시할 수 있으므로 웹사이트의 배경이나 장식 요소로 보기 좋게 보일 수 있습니다. 플러그인은 여러 버전으로 제공됩니다.

11.플렉스 슬라이더

귀하의 웹사이트를 위한 범용 무료 플러그인입니다. 이 플러그인은 여러 슬라이더 및 캐러셀 옵션으로 제공됩니다.

12. 포토 프레임

사진범용 플러그인입니다. 다양한 설정이 있고 모든 것이 빠르고 쉽게 작동하며 슬라이드를 전체 화면으로 볼 수 있습니다. 슬라이더는 고정된 크기와 적응형, 썸네일 유무, 원형 스크롤 유무 등으로 사용할 수 있습니다.

추신슬라이더를 여러번 설치했는데 최고 중 하나라고 생각합니다

13. 축소판이 포함된 무료 적응형 3D 슬라이더 갤러리.

실험적인 갤러리 슬라이더 3DPanel레이아웃그리드와 흥미로운 애니메이션 효과가 있습니다.

14. CSS3의 슬라이더

적응형 슬라이더는 콘텐츠의 부드러운 모양과 가벼운 애니메이션을 갖춘 CSS3를 사용하여 만들어졌습니다.

15. 와우 슬라이더

와우 슬라이더놀라운 시각 효과를 지닌 이미지 슬라이더입니다.

17. 탄성

완전한 반응성과 슬라이드 썸네일을 갖춘 탄력적인 슬라이더.

18. 슬릿

CSS3 애니메이션을 사용한 전체 화면 반응형 슬라이더입니다. 슬라이더는 두 가지 버전으로 만들어집니다. 애니메이션은 매우 독특하고 아름답게 완성되었습니다.

19. 적응형 사진 갤러리 플러스

이미지 로딩 기능이 있는 간단한 무료 갤러리 슬라이더입니다.

20. WordPress용 반응형 슬라이더

WP용 적응형 프리 슬라이더.

21. 시차 콘텐츠 슬라이더

시차 효과가 있는 슬라이더와 CSS3를 사용하여 각 요소를 제어합니다.

22. 음악 링크가 포함된 슬라이더

JPlayer 오픈 소스 코드를 사용하는 슬라이더. 이 슬라이더는 음악이 포함된 프레젠테이션과 유사합니다.

23. jmpress.js를 사용한 슬라이더

반응형 슬라이더는 jmpress.js를 기반으로 하므로 슬라이드에 흥미로운 3D 효과를 추가할 수 있습니다.

24. 빠른 호버 슬라이드쇼

빠른 슬라이드 전환이 가능한 슬라이드 쇼. 마우스를 올리면 슬라이드 스위치가 켜집니다.

25. CSS3를 사용한 이미지 아코디언

CSS3을 사용한 이미지 아코디언.

26. 터치 최적화 갤러리 플러그인

터치기기에 최적화된 반응형 갤러리입니다.

27. 3D 갤러리

3D 벽 갤러리- 3D 효과가 표시되는 Safari 브라우저용으로 생성되었습니다. 다른 브라우저에서 보시면 기능은 잘 되겠지만 3D 효과가 눈에 띄지 않습니다.

28. 페이지 매김 기능이 있는 슬라이더

JQuery UI 슬라이더를 사용한 페이지 매김 기능이 있는 반응형 슬라이더입니다. 아이디어는 간단한 탐색 개념을 사용하는 것입니다. 모든 이미지를 되감거나 슬라이드별로 전환하는 것이 가능합니다.

29.jQuery를 이용한 이미지 몽타주

화면 너비에 따라 이미지를 자동으로 정렬합니다. 포트폴리오 웹사이트를 개발할 때 매우 유용한 기능입니다.

30. 3D 갤러리

CSS3와 jQuery를 사용한 간단한 3D 원형 슬라이더.

31. CSS3 및 jQuery를 사용하여 3D 효과를 적용한 전체 화면 모드

아름다운 전환으로 전체 화면 이미지를 볼 수 있는 슬라이더입니다.

이 기사에서는 CSS Flexbox 및 CSS 변환을 사용하여 웹 사이트에 대한 적응형 슬라이더를 매우 간단하게 만드는 방법을 살펴보겠습니다.

슬라이더 소스 코드 및 데모

ChiefSlider라는 슬라이더 프로젝트가 GitHub에 있습니다. 이 링크를 이용해서 이동하실 수 있습니다.

하나의 활성 슬라이드가 있는 슬라이더(루핑 없음):

3개의 활성 슬라이드가 있는 슬라이더(루핑 없음):

슬라이더를 사용하여 기사를 회전하는 방법을 보여주는 예:

ChiefSlider의 장점

이 슬라이더의 주요 장점을 나열해 보겠습니다.

우선 그는 요소(항목)의 복제본을 생성하지 않습니다.예를 들어 플러그인에서 구현된 대로 루핑을 구성합니다. 올빼미회전목마개요: 없음!중요; ) #prewBut ( 왼쪽: 10px; ) #nextBut ( 오른쪽: 10px; 배경: url("arrowBg.png") 오른쪽 중앙 no-repeat; ) #prewBut:hover, #nextBut:hover ( 불투명도: 1; ) 멋진;
둘째, 라이브러리에 의존하지 않습니다 jQuery; 이는 추가 요구 사항을 제거할 뿐만 아니라 더 쉽게 만듭니다.
셋째, 그는 실질적으로 문서의 DOM을 변경하지 않습니다.; 그것이 하는 유일한 일은 슬라이더 요소에 대한 CSS 변환 값을 추가하거나 변경하는 것입니다.
넷째, 다음과 같은 내용만 포함됩니다. 최소 기능 세트; 작업에 따라 추가 기능을 추가할 수 있습니다.
다섯째, 적응적이다. 모든 웹사이트에서 사용할 수 있습니다. 슬라이더의 적응성은 CSS를 사용하여 구성됩니다.
여섯째, CSS를 사용하여 활성 요소의 수를 조정합니다. 이는 하나의 활성 슬라이드 또는 여러 개의 슬라이드가 포함된 회전식 슬라이드를 만드는 데 사용할 수 있음을 의미합니다.

ChiefSlider 설치

슬라이더를 설치하려면 3단계를 거쳐야 합니다.

ChiefSlider CSS를 페이지 또는 페이지에 연결된 CSS 파일에 추가합니다.
페이지의 필요한 위치에 슬라이더의 HTML 코드를 배치합니다.
페이지 또는 페이지에 연결된 js 파일에 JavaScript 코드를 삽입합니다.

CSS 및 JavaScript 코드를 최소화하는 것이 좋습니다. 이렇게 하면 페이지 로딩 속도가 빨라집니다.

반복 없이 웹사이트용 간단한 슬라이더를 개발하는 방법

슬라이더 만들기 ChiefSlider HTML 코드, CSS 및 JavaScript(jQuery 제외) 작성으로 구성됩니다.

슬라이더 HTML 코드 ChiefSlider:

보시다시피 슬라이더는 매우 간단한 HTML 아키텍처를 가지고 있습니다. 슬라이더 클래스가 있는 메인 블록으로 시작합니다. 이 블록은 3개의 요소로 구성됩니다.

첫 번째 요소는 .slider__wrapper 입니다. .slider__item 요소(슬라이드)에 대한 래퍼 역할을 합니다.

나머지 두 요소(.slider__control)는 시각적으로 버튼을 나타냅니다. 슬라이드를 탐색하는 데 사용됩니다. 이전 및 다음 요소로 이동합니다.

ChiefSlider 슬라이더의 CSS 코드:

/* 주요 스타일 */ .slider ( 위치: 상대; 오버플로: 숨겨진; ) .slider__wrapper ( 디스플레이: 플렉스; 전환: 변환 0.6초 용이성; /* 0.6 초 단위의 슬라이드 변경 기간 */ ) .slider__item ( 플렉스: 0 0 50%; /* 활성 슬라이드 수를 정의합니다(이 경우 2 */ max-width: 50%; /* 활성 슬라이드 수를 정의합니다(이 경우 2 */ ) /* 뒤로 및 앞으로 버튼 스타일 * / .slider__control ( 위치: 절대; 표시: 없음; 상단: 50%; 변환: 번역Y(-50%); align-items: 센터; 정당화-내용: 센터; 텍스트-정렬: 센터; 너비: 40px; /* 버튼 너비 */ height: 50px; /* 버튼 높이 */ opacity: .5; /* 투명도 */ background: #000; /* 배경색 */ ) .slider__control_show (display: flex; ) .slider__control:hover, . Slider__control:focus ( 텍스트 장식: 없음; 윤곽선: 0; 불투명도: .9; /* 투명도 */ ) .slider__control_left ( 왼쪽: 0; ) .slider__control_right ( 오른쪽: 0; ) .slider__control::before ( 내용: " "; 디스플레이: 인라인 블록;

너비: 20px; /* 아이콘 너비(화살표) */ height: 20px; /* 아이콘의 높이(화살표) */ background: transparent no-repeat center center; 배경 크기: 100% 100%; ) .slider__control_left::before ( 배경 이미지: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23fff " viewBox="0 0 8 8"%3E%3Cpath d="M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z"/%3E%3C/svg%3E "); ) .slider__control_right::before ( 배경 이미지: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" fill= "%23fff" viewBox="0 0 8 8"%3E%3Cpath d="M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z"/%3E%3C/svg%3E "); )보시다시피 슬라이더의 CSS 코드도

별로 복잡하지 않은 . 슬라이더의 모양을 사용자 정의할 수 있는 기본 정의는 설명과 함께 제공됩니다.:

정의하는 CSS 코드

활성 요소 수

/* 활성 슬라이드 수를 정의합니다(이 경우 2) */ flex: 0 0 50%; 최대 너비: 50%; 이 코드는 슬라이더의 활성 요소 수를 2로 설정합니다.예를 들어 슬라이더가

하나의 활성 요소

, 이러한 정의를 다음과 같이 변경해야 합니다. /* 활성 슬라이드 수를 정의합니다(이 경우 1) */ flex: 0 0 100%; 최대 너비: 100%;창조

적응형 슬라이더

Slider__item ( 플렉스: 0 0 100%; 최대 너비: 100%; ) @media (최소 너비: 980px) ( .slider__item ( 플렉스: 0 0 25%; 최대 너비: 25%; ) )

ChiefSlider 슬라이더용 JavaScript 코드:

"엄격하게 사용하세요"; var multiItemSlider = (function () ( 반환 함수(선택기) ( var _mainElement = document.querySelector(selector), // 메인 블록 요소 _sliderWrapper = _mainElement.querySelector(".slider__wrapper"), // 래퍼 for.slider-item _sliderItems = _mainElement.querySelectorAll(".slider__item"), // 요소(.slider-item) _sliderControls = _mainElement.querySelectorAll(".slider__control"), // 제어 _sliderControlLeft = _mainElement.querySelector(".slider__control_left"), // 버튼 "LEFT" _sliderControlRight = _mainElement.querySelector(".slider__control_right"), // 버튼 "RIGHT" _wrapperWidth =parseFloat(getCompulatedStyle(_sliderWrapper).width), // 래퍼 너비 _itemWidth =parseFloat(getCompulatedStyle(_sliderItems).width), / / 한 요소의 너비 _positionLeftItem = 0, // 왼쪽 활성 요소의 위치 _transform = 0, // 변환 값.slider_wrapper _step = _itemWidth / _wrapperWidth * 100, // 단계 크기(변형용) _items = ; 요소 // _items 배열 채우기 _sliderItems.forEach(function (item, index) ( _items.push(( item: item, position: index, 변환: 0 ));<= position.getMin) { return; } if (!_sliderControlRight.classList.contains("slider__control_show")) { _sliderControlRight.classList.add("slider__control_show"); } if (_sliderControlLeft.classList.contains("slider__control_show") && _positionLeftItem - 1 <= position.getMin) { _sliderControlLeft.classList.remove("slider__control_show"); } _positionLeftItem--; _transform += _step; } _sliderWrapper.style.transform = "translateX(" + _transform + "%)"; } // обработчик события click для кнопок "назад" и "вперед" var _controlClick = function (e) { if (e.target.classList.contains("slider__control")) { e.preventDefault(); var direction = e.target.classList.contains("slider__control_right") ? "right" : "left"; _transformItem(direction); } }; var _setUpListeners = function () { // добавление к кнопкам "назад" и "вперед" обработчика _controlClick для события click _sliderControls.forEach(function (item) { item.addEventListener("click", _controlClick); }); } // инициализация _setUpListeners(); return { right: function () { // метод right _transformItem("right"); }, left: function () { // метод left _transformItem("left"); } } } }());

)));

var position = ( getMin: 0, getMax: _items.length - 1, ) var _transformItem = 함수 (방향) ( if (direction === "right") ( if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) >= position .getMax) ( return; ) if (!_sliderControlLeft.classList.contains("slider__control_show")) ( _sliderControlLeft.classList.add("slider__control_show"); ) if (_sliderControlRight.classList.contains("slider__control_show") && (_positionLeftItem + _wrapperWidth / _itemWidth) >= position.getMax) ( _sliderControlRight.classList.remove("slider__control_show"); ) _positionLeftItem++; _transform -= _step; if (direction === "left") ( if (_positionLeftItem JavaScript 코드의 주요 작업은 _transformItem 함수에 의해 수행됩니다. 이 함수는 전달된 방향에 따라 element.slider__wrapper를 변환합니다.

슬라이더 초기화

다음과 같이 수행 :

Var 슬라이더 = multiItemSlider(".slider") 슬라이더 데모

이렇게 하려면 현재 위치 및 변환 값을 각 element.slider__item에 바인딩해야 합니다.

이러한 작업은 _items 배열을 사용하여 가장 최적으로 수행될 수 있습니다.

Var_items = ; // elements.slider__item으로 배열 채우기 _sliderItems.forEach(function (item, index) ( _items.push(( item: item, position: index, 변환: 0 )); ));

그러나 배열을 사용하는 것뿐만 아니라 예를 들어 데이터 속성을 사용하여 데이터를 요소와 연결할 수 있습니다. 그러나 DOM 작업은 가장 느리고 리소스 집약적이므로 다른 방법으로 수행할 수 있는 경우에는 권장되지 않습니다.

다음 단계는 최소 및 최대 위치로 .slider__item을 계산하는 함수를 만드는 것입니다.

Var position = ( getItemMin: function () ( var indexItem = 0; _items.forEach(function (item, index) ( if (item.position< _items.position) { indexItem = index;` } }); return indexItem; }, getItemMax: function () { var indexItem = 0; _items.forEach(function (item, index) { if (item.position >_items.position) ( indexItem = index; ) ));

indexItem을 반환합니다.), getMin: 함수() ( return _items.position; ), getMax: 함수() ( return _items.position; ) ) 마지막 기본 단계수행해야 할 작업은 기능을 수정하는 것입니다. _transformItem. 즉, 요소의 위치를 변경하는 코드를 추가합니다.

.slider__항목< position.getMin()) { nextItem = position.getItemMax(); _items.position = position.getMin() - 1; _items.transform -= _items.length * 100; _items.item.style.transform = "translateX(" + _items.transform + "%)"; } _transform += _step; } _sliderWrapper.style.transform = "translateX(" + _transform + "%)"; }

그리고 그 변환을 수행합니다.

Var _transformItem = 함수(방향) ( var nextItem; if (방향 === "오른쪽") ( _positionLeftItem++; if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) > position.getMax()) ( nextItem = position.getItemMin() ; _items.position = position.getMax() + 1; _items.transform += _items.length * 100 ) if (direction === "왼쪽") ( _positionLeftItem

사실 여기에서는 모든 것이 간단합니다.

예를 들어 다음 슬라이드로 이동하려면 items 배열에서 현재 가장 오른쪽 요소보다 위치가 큰 요소를 먼저 검색합니다.slider__item. 배열에 그러한 요소가 있으면 element.slider__wrapper의 변환이 수행됩니다(즉, 루프가 없는 알고리즘에서와 같은 작업).하지만 만약 그런 요소는 없어요, 그런 다음 변환.slider__wrapper 외에도 여러 가지 다른 작업이 수행됩니다. 먼저 항목 배열에서 요소를 검색합니다. 최소 위치. 그는 이 물건을 받은 후 값이 현재 오른쪽 요소의 값 + 1과 동일한 위치가 설정됩니다., 그가 마지막에 끝날 정도의 백분율, 즉 마지막 요소 뒤에.

이전 슬라이드로 이동하려면 유사한 작업이 수행되지만 그 반대입니다.

또한 반복 슬라이더의 경우 왼쪽 및 오른쪽 버튼의 가시성을 전환할 필요가 없습니다. 이 버전의 슬라이더에는 이러한 버튼이 항상 표시됩니다.

이렇게 하려면 다음이 필요합니다.

"오른쪽" 컨트롤에서 Slider__control_show 클래스를 제거합니다.
selector.slider__control에 대한 CSS에서 표시 속성 값을 flex 로 변경합니다.

슬라이더 데모

반복 및 자동 슬라이드 변경 기능을 갖춘 슬라이더를 만드는 방법은 무엇입니까?

setInterval 함수를 사용하여 특정 간격으로 자동 슬라이드 변경을 프로그래밍할 수 있습니다.

Var _cycle = 함수(방향) ( if (!_config.isCycling) ( return; ) _interval = setInterval(function () ( _transformItem(direction); ), _config.interval); )

이 예의 setInterval 함수는 _config.interval 변수 값과 동일한 지정된 간격으로 _transformItem 함수를 실행합니다.

또한 커서를 슬라이더로 이동할 때 슬라이드 자동 변경에 중지를 추가하는 것이 좋습니다.

다음과 같이 이 기능을 구현할 수 있습니다.

If (_config.pause && _config.isCycling) ( _mainElement.addEventListener("mouseenter", function () (clearInterval(_interval); )); _mainElement.addEventListener("mouseleave", function () (clearInterval(_interval); _cycle( _config.direction);

요소가 사용자에게 표시되지 않는 경우 자동 슬라이드 변경을 중지하는 방법은 무엇입니까?

다음 두 가지 경우에는 자동 슬라이드 변경을 비활성화하는 것이 좋습니다.

(이 슬라이더가 있는) 페이지가 비활성 상태일 때;
슬라이더가 페이지의 가시성 영역 밖에 있을 때.

첫 번째 경우는 visiblechange 이벤트를 사용하여 처리할 수 있습니다.

Document.addEventListener("visibilitychange", _handleVisibilityChange, false);

visiblechange 이벤트 핸들러의 기능:

// "문서 가시성 변경" 이벤트 처리 var _handleVisibilityChange = function () ( if (document.visibilityState === "hidden") (clearInterval(_interval); ) else (clearInterval(_interval); _cycle(_config.direction); ) )

_isElementVisible 함수를 사용하여 요소의 가시성을 계산할 수 있습니다.

함수 _isElementVisible(element) ( var ect = element.getBoundingClientRect(), vWidth = window.innerWidth || doc.documentElement.clientWidth, vHeight = window.innerHeight || doc.documentElement.clientHeight, elemFromPoint = 함수 (x, y) ( return document.elementFromPoint(x, y) if (ret.right);< 0 || rect.bottom < 0 || rect.left >v폭 || ret.top > vHeight) ( false 반환; ) return (element.contains(elemFromPoint(ect.left, ret.top)) || element.contains(elemFromPoint(direct.right, ret.top)) || element.contains (elemFromPoint(직전.오른쪽, 직진.하단)) || element.contains(elemFromPoint(직전.좌측, 직하.하단))); )

예를 들어 _transformItem 함수의 시작 부분에 _isElementVisible 호출을 배치할 수 있습니다. 이 작업은 슬라이더가 현재 뷰포트 밖에 있는 경우 자동 슬라이드 전환을 취소합니다.

Var _transformItem = function (방향) ( var nextItem; if (!_isElementVisible(_mainElement)) ( return; ) //...

브라우저 창 크기 조정에 반응하는 슬라이더

이 적응형 슬라이더 버전은 다음을 허용한다는 점에서 이전 버전과 다릅니다. 브라우저 창 크기를 조정할 때 활성 요소(슬라이드) 수 변경. 사용자는 일반적으로 브라우저 크기를 조정하지 않지만 여전히 그런 일이 발생할 수 있습니다.

이는 resize 이벤트와 _states 배열을 사용하여 구현됩니다. 배열은 계산에 사용됩니다. 이를 사용하면 필요하지 않을 때 슬라이더를 다시 초기화하는 것을 피할 수 있습니다.

저자로부터:스크롤 없이 볼 수 있는 웹 페이지 부분이 "죽었다"는 소문이 돌았음에도 불구하고 좋은 슬라이더에 대한 필요성은 사라지지 않았습니다. 잠시 솔직하게 말하자면 슬라이더는 재미있습니다. 게다가 콘텐츠를 움직이는 것과는 달리 사용자에게 '와우' 효과를 불러일으키는 것도 없습니다. 모든 슬라이더는 서로를 대체하는 여러 슬라이드의 집합이며 슬라이더 코드가 최대한 가벼워지는 것이 매우 중요합니다. 그러한 경우에는 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 적응형 jQuery 슬라이더 플러그인"이라는 이름은 이 슬라이더를 실제로 평가할 수 없습니다.
슬라이드 간 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 전환

사용자 정의 가능한 UI 및 Photoshop용 스킨 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 Slider Zoom In/Out Effect Fully Responsive는 Ken Burns 효과만 있지만 잘 구현되어 있습니다.

11. jQuery 캐러셀의 진화

앞서 언급한 Advanced Slider - jQuery XML Slider와 마찬가지로 jQuery Carousel Evolution에는 기능을 향상하거나 슬라이더를 다른 프로젝트에 통합하는 데 사용할 수 있는 자체 API가 있습니다.

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

오늘날 스스로 웹 사이트를 만들려면 어떤 기술과 지식이 필요합니까? 인텐시브에서 알아보세요!

이미지, HTML 마크업, YouTube 및 Vimeo 비디오를 통해 다음도 받을 수 있습니다.

SEO 최적화

9가지 캐러셀 스타일

그림자 및 반사 효과

이미지 크기는 앞면과 뒷면 모두 조정 가능

jQuery Carousel Evolution은 다양한 사용 사례를 갖춘 간단한 캐러셀입니다.

12. 섹시 슬라이더

섹시 슬라이더는 더 이상 이전만큼 섹시하지 않습니다. 하지만 이 슬라이더는 오래되었기 때문에 신뢰할 수 있습니다.

슬라이더는 언뜻 보면 별로 인상적이지 않지만 잘 사용자 정의하면 디자인에 완벽하게 들어맞을 것입니다. 가능성:

슬라이드 자동재생

이미지 캡션

연속 슬라이드 재생

6가지 전환 효과

섹시한 슬라이더는 당신이 그 모든 힘과 잠재력을 발휘하기를 기다리고 있습니다.

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

이러한 모든 모바일 친화적인 디자인과 터치스크린 지원을 통해 데스크톱 컴퓨터를 잊지 않은 jQuery 슬라이더를 보는 것이 좋습니다.

라이트박스가 포함된 jQuery 이미지 및 콘텐츠 스크롤러는 키보드 입력, 마우스 휠 및 기타 기능을 지원합니다.

수평 및 수직 방향

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

한 번에 특정 개수의 슬라이드를 표시하도록 설정하는 기능

인라인 이미지, Flash, iframe, Ajax 및 인라인 콘텐츠

슬라이더에는 라이트박스도 내장되어 있습니다. 원하는 경우 라이트박스가 포함된 jQuery 이미지 및 콘텐츠 스크롤러에서 슬라이더 자체를 시작할 수 없지만 라이트박스를 별도로 시작할 수 있습니다.

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개 이상의 레이아웃

그리고 훨씬 더

Zozo Accordion은 무료 지원과 지속적인 업데이트는 물론 jQuery 아코디언에 원하는 모든 기능을 제공합니다.

17. jQuery 반응형 OneByOne 슬라이더 플러그인

jQuery 반응형 OneByOne 슬라이더 플러그인은 슬라이더라기보다는 단순한 애니메이션에 가깝습니다. 한 번에 하나의 슬라이드를 표시하는 대신 이 인스턴스는 다음 슬라이드로 이동하기 전에 해당 영역에 더 이상 공간이 남지 않을 때까지 한 번에 한 단계씩 슬라이드로 화면을 채웁니다.

CSS3 애니메이션은 Animate.css에서 실행되며 가볍고 여러 레이어로 구성되며 모바일 친화적입니다. 다양한 기능:

드래그 앤 드롭 탐색 옵션도 있습니다. jQuery 반응형 OneByOne 슬라이더 플러그인은 Twitter Bootstrap Carousel로 구동됩니다.

18. Accordionza - jQuery 플러그인

이보다 쉬운 jQuery 슬라이더는 없습니다. 작동하려면 슬라이더를 3Kb만 다운로드하면 되므로 Accordionza는 가장 가벼운 아코디언 슬라이더가 됩니다.

세 가지 스타일 옵션이 마음에 들지 않으면 HTML과 CSS를 직접 조정할 수 있습니다. 가능성:

키보드 탐색

효과와 버튼을 쉽게 사용자 정의할 수 있습니다.

점진적인 향상 기술 - JavaScript 없이 작동

Accordionza는 혼합 콘텐츠의 다양한 변형을 표시할 수 있으므로 매우 유연합니다.

19. mightySlider – 반응형 다목적 슬라이더

MightySlider는 정말 강력한 슬라이더입니다. 단순한 이미지 슬라이더뿐만 아니라 메뉴 항목 탐색 기능이 있는 전체 화면 단방향 슬라이더로도 사용할 수 있습니다. 그것의 도움으로 당신은 멋진 한 페이지짜리 웹사이트를 만들 수 있습니다.

내부적으로는 다음과 같은 다양한 옵션을 찾을 수 있습니다.

키보드, 마우스 및 터치 지원

하드웨어 가속을 통한 CSS3 전환

유효한 마크업 정리 및 SEO 최적화

무제한의 슬라이드, 캡션 레이어, 슬라이드 효과

API는 매우 강력하고 개발자 친화적이므로 다양한 사용 방법이 가능합니다. MightySlider는 깨끗하고 주석이 잘 달린 코드를 갖춘 훌륭하고 진보적인 jQuery 슬라이더입니다.

20. 시차 슬라이더 - 반응형 jQuery 플러그인

Parallax Slider는 jQuery 반응형 OneByOne 슬라이더 플러그인처럼 작동하며 단일 슬라이드 내에서 각 레이어를 별도로 애니메이션할 수 있습니다. 시차 애니메이션을 추가하여 모든 슬라이드 또는 하나의 슬라이드에만 애니메이션을 적용할 수 있습니다.

이 세트에는 시차 효과가 있는 다양한 유형의 슬라이더 4개가 포함되어 있습니다. 다른 jQuery 슬라이더와 마찬가지로 다음 기능을 갖추고 있습니다.

완전히 사용자 정의 가능

터치 지원

완전 반응형, 무제한 레이어

자동재생, 반복, 높이 및 너비 조정, 타이머

애니메이션 레이어는 단지 텍스트나 이미지에 관한 것이 아닙니다. YouTube, Vimeo 및 HTML5 비디오를 추가할 수도 있습니다. Parallax Slider는 모든 장치에서 지원되는 Flash 자체보다 Flash 효과를 훨씬 더 효과적으로 시뮬레이션할 수 있는 방법을 보여주는 또 다른 좋은 예입니다.

결론

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

이 목록의 슬라이더 중 마음에 들지 않는 것이 있으면 언제든지 Envato의 jQuery 코드 자습서를 사용하여 완전히 새롭고 독특한 것을 디자인할 수 있습니다.

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