화살표와 탐색이 있는 Jquery 수직 슬라이더. 반응형 슬라이더 선택

> >

슬라이더 스타일

.slider-box( 너비 : 320픽셀 ; 높이 : 210픽셀 ; 오버플로 : 숨김 ; ) .slider( 위치 : 상대 ; 너비 : 10000픽셀 ; 높이 : 210픽셀 ; ) .slider img( float : left ; z-index : 0 ; )

container.slider-box는 슬라이더의 크기를 지정합니다. overflow:hidden 속성은 요소 내 범위 내에 있지 않은 모든 요소를 ​​숨깁니다.

container.slider는 큰 너비로 설정됩니다. 이것은 모든 슬라이드를 거기에 맞추는 데 필요합니다.

슬라이드는 float:left 속성을 사용하여 정렬됩니다.

슬라이더 블록의 개략도는 아래와 같습니다.

스크립트

슬라이드의 이동은 container.slider의 margin-left 속성을 부드럽게 변경하여 수행됩니다.

$(함수() ( var 너비= $(".slider-box" ) .width() ; // 슬라이더 너비.간격 = 4000 ; // 슬라이드 변경 간격.$(".slider img:last" ) .clone () .prependTo (".slider" ) ; // 마지막 슬라이드의 복사본이 시작 부분에 배치됩니다.$() .eq (1) .clone() .appendTo(".slider") ; // 첫 번째 슬라이드의 복사본이 끝에 배치됩니다. // Container.slider는 한 슬라이드 너비만큼 왼쪽으로 이동합니다. setInterval("애니메이션()" , 간격) ; // animation() 함수를 실행하여 슬라이드 전환을 수행합니다.) ) ; 함수 애니메이션() ( var margin = parseInt($(".slider" ) .css ("marginLeft" ) ) ; // 현재 블록 offset.slider너비= $(".slider-box" ).width() , // 슬라이더 너비. SlidesAmount= $(".slider" ) .children() .length ; // 슬라이더의 슬라이드 수입니다. if (여백!= (- 너비* (slidersAmount- 1 ) ) ) // 현재 슬라이드가 마지막 슬라이드가 아닌 경우( 여백 = 여백 너비; // 여백 값은 슬라이드 너비만큼 줄어듭니다.) 또 다른 ( // 마지막 슬라이드가 표시되면$(".slider" ) .css("margin-left" , -width) ; // 그런 다음 block.slider는 초기 위치로 돌아갑니다.여백=- 너비* 2 ; ) $(".slider" ) .animate (( marginLeft: margin) , 1000 ) ; // Block.slider가 왼쪽으로 1슬라이드 이동합니다. } ;

결과는 무한 자동 스크롤 기능이 있는 간단한 슬라이더입니다.

이 기사에서는 CSS Flexbox 및 CSS 변환을 사용하여 사이트에 대한 적응형 슬라이더를 만드는 것이 매우 쉬운 방법을 분석합니다.

소스 코드 및 슬라이더 데모

ChiefSlider라는 슬라이더 프로젝트는 GitHub에서 호스팅됩니다. 이 링크로 가시면 됩니다.

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

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

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

ChiefSlider의 장점

이 슬라이더의 주요 장점을 나열합니다.

• 먼저 그는 요소(항목)의 복제본을 생성하지 않습니다.예를 들어 플러그인에서 구현된 대로 루핑을 구성하기 위해 올빼미 회전 목마그리고 멋진;
• 둘째, 라이브러리에 의존하지 않습니다. 제이쿼리; 이것은 추가 요구 사항을 제거할 뿐만 아니라 더 쉽게 만듭니다.
• 셋째, 실질적으로 문서의 DOM을 변경하지 않습니다.; 그것이 하는 유일한 일은 슬라이더 요소의 CSS 변환 값을 추가하거나 변경하는 것입니다.
• 넷째, 그것은 단지 포함 최소한의 기능 세트; 작업에 따라 추가 기능을 추가할 수 있습니다.
• 다섯째, 적응적이다. 모든 사이트에서 사용할 수 있습니다. 슬라이더 적응성은 CSS를 사용하여 구성됩니다.
• 여섯째, 활성 요소의 수는 CSS를 사용하여 구성됩니다. 즉, 하나의 활성 슬라이드 또는 원하는 수의 활성 슬라이드가 있는 캐러셀을 만드는 데 사용할 수 있습니다.

ChiefSlider 설치

슬라이더 설치는 3단계로 완료됩니다.

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

CSS 및 JavaScript 코드를 최소화하는 것이 바람직합니다. 이 작업은 더 빠른 페이지 로드를 제공합니다.

간단한 웹사이트 슬라이더를 디자인하는 방법(루핑 없음)

슬라이더 만들기 수석슬라이더 HTML 코드, CSS 및 JavaScript(jQuery 없이) 생성으로 구성됩니다.

슬라이더 HTML 코드 수석슬라이더:

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

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

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

ChiefSlider의 CSS 코드:

/* 기본 스타일 */ .slider ( position: relative; overflow: hidden; ) .slider__wrapper ( display: flex; transition: transform 0.6s easy; /* 0.6 슬라이드 전환 지속 시간(초) */ ) .slider__item ( flex: 0 0 50%; /* 활성 슬라이드 수를 정의합니다(이 경우 2 */ max-width: 50%; /* 활성 슬라이드 수를 정의합니다(이 경우 2 */ )) /* 뒤로 및 앞으로 버튼의 스타일 * / .slider__control ( 위치: 절대; 표시: 없음; 상단: 50%; 변환: translateY(-50%); align-items: center; justify-content: center; text-align: center; 너비: 40px; / * 버튼 너비 */ 높이: 50px; /* 버튼 높이 */ 불투명도: .5; /* 투명도 */ 배경: #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 /* 아이콘(화살표) 너비 */ 높이: 20px; /* 아이콘(화살표) 높이 */ 배경: 반복되지 않는 투명한 중앙 센터; 배경 크기: 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%3C 경로 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" 채우기 = "%23fff" viewBox="0 0 8 8"%3E%3C경로 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%

창조 적응형 슬라이더미디어 쿼리를 통해 수행됩니다.

예를 들어, 작은 화면이 있는 장치에서는 하나의 활성 슬라이드가 있어야 하고 큰 장치에서는 4개의 슬라이더가 있어야 합니다.

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

ChiefSlider용 자바스크립트 코드:

"엄격한 사용"; var multiItemSlider = (function() ( return function (selector) ( var _mainElement = document.querySelector(selector), // 주 요소 차단 _sliderWrapper = _mainElement.querySelector(".slider__wrapper"), // .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(getComputedStyle(_sliderWrapper).width), // 래퍼 너비 _itemWidth = parseFloat(getComputedStyle(_sliderItems).width), / / 한 요소의 너비 _positionLeftItem = 0, // 왼쪽 활성 요소의 위치 _transform = 0, // 변환 값 슬라이더_wrapper _step = _itemWidth / _wrapperWidth * 100, // 단계 크기(변환용) _items = ; // 항목 배열 // 배열 채우기 _items _sliderItems.forEach(function (item, index) ( _items.push(( item: item, position: index, transform: 0 )); )); var position = ( getMin: 0, getMax: _items.length - 1, ) var _transformItem = function (direction) ( 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 (방향 === "왼쪽") ( if (_positionLeftItem<= 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"); } } } }());

JavaScript 코드의 주요 작업은 _transformItem 함수에 의해 수행됩니다. 이 함수는 전달된 방향에 따라 element.slider__wrapper를 변환합니다.

슬라이더 초기화다음과 같이 수행됩니다.

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

루핑 슬라이더를 만드는 방법은 무엇입니까?

슬라이드는 .slider__item 요소를 변환하여 반복할 수 있습니다.

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

가장 최적의 방법은 _items 배열을 사용하여 이러한 작업을 수행할 수 있다는 것입니다.

var_items = ; // 배열에 items.slider__item _sliderItems.forEach(function (item, index) ( _items.push(( item: item, position: index, transform: 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 = 인덱스; ) )); 반환 인덱스 항목; ), getMin: function() ( return _items.position; ), getMax: function () ( return _items.position; ) )

마지막 기본 단계할 일은 기능을 개선하는 것입니다 _변환아이템. 즉, 요소의 위치를 ​​변경하는 코드를 추가하십시오. .slider_item변환을 수행합니다.

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, _items.item.style.transform = "translateX(" + _items.transform + "%)", ) _transform -= _step; ) if (방향 === "왼쪽") ( _positionLeftItem--; if (_positionLeftItem)< 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 + "%)";
}

사실 여기에서는 모든 것이 간단합니다.
예를 들어 다음 슬라이드로 이동하기 위해 항목 배열은 현재 가장 오른쪽 element.slider_item보다 큰 위치의 요소를 먼저 검색합니다.
배열에 그러한 요소가 있으면 .slider__wrapper 요소의 변환이 수행됩니다(즉, 루프가 없는 알고리즘에서와 같이 작업).
하지만 만약 그런 요소가 없습니다, 다음 transformation.slider__wrapper 외에도 많은 다른 작업이 수행됩니다.  먼저 항목 배열에서 요소를 검색합니다. 최소 위치로.  이 요소를 받은 후 위치가 설정되고 그 값은 현재 오른쪽 요소의 값 + 1과 같습니다..  그리고 물론, 그것은 그의 변신, 즉, 끝에 끝나는 비율만큼  마지막 요소 이후.

이전 슬라이드로 이동하려면 동일한 단계가 수행되지만 반대입니다.

또한 루핑 슬라이더의 경우 왼쪽 및 오른쪽 버튼의 가시성을 전환할 필요가 없습니다.  이 버튼은 항상 이 버전의 슬라이더에 표시됩니다.
이렇게 하려면 다음이 필요합니다.
"오른쪽" 컨트롤에서 Slider__control_show 클래스를 제거합니다.
 
.slider__control 선택기의 CSS에서 display 속성 값을 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);
Visibilitychange 이벤트 핸들러를 위한 함수:
// "문서 가시성 변경" 이벤트 처리 var _handleVisibilityChange = function() ( if (document.visibilityState === "hidden") ( clearInterval(_interval); ) else ( clearInterval(_interval); _cycle(_config.direction); ) )
요소의 가시성은 _isElementVisible 함수를 사용하여 계산할 수 있습니다.
Function _isElementVisible(element) ( var rect = element.getBoundingClientRect(), vWidth = window.innerWidth || doc.documentElement.clientWidth, vHeight = window.innerHeight || doc.documentElement.clientHeight, elemFromPoint = function (x, y) ( document.elementFromPoint(x, y) 반환, if(rect.right)< 0 || rect.bottom < 0 || rect.left >폭 ||  rect.top > vHeight) ( false 반환; ) 반환 (element.contains(elemFromPoint(rect.left, rect.top)) || element.contains(elemFromPoint(rect.right, rect.top)) || element.contains (elemFromPoint(rect.right, rect.bottom)) || element.contains(elemFromPoint(rect.left, rect.bottom)));  )
예를 들어 _transformItem 함수의 시작 부분에서 _isElementVisible을 호출할 수 있습니다.  슬라이더가 현재 뷰포트 외부에 있는 경우 이 작업은 자동 슬라이드 전환을 취소합니다.
Var _transformItem = function(방향) ( var nextItem; if (!_isElementVisible(_mainElement)) ( return; ) //...
브라우저 창 크기 조정에 반응하는 슬라이더
이 버전의 적응형 슬라이더는 이전 버전과 다릅니다. 브라우저 창 크기를 조정할 때 활성 요소(슬라이드) 수 변경.  일반적으로 사용자는 브라우저의 크기를 조정하지 않지만 여전히 발생할 수 있습니다.
이것은 크기 조정 이벤트와 _states 배열을 사용하여 구현됩니다.  배열은 계산에 사용됩니다.  이를 사용하면 슬라이더가 필요하지 않을 때 슬라이더를 다시 초기화하지 않도록 할 수 있습니다.
중 하나 효과적인 방법사이트 페이지에서 사용자의 관심을 끄는 것은 움직이는 애니메이션을 만드는 것입니다.  애니메이션 요소는 사용자에게 제품에 대해 더 시각적으로 알리고 보여주는 데 도움이 됩니다.  최근에는 슬라이딩 패널이 매우 인기를 끌 뿐만 아니라 이미지를 스크롤하거나 클릭할 때 나타나는 다양한 효과도 있습니다.  슬라이더, 캐러셀 및 슬라이더라고도 합니다.  이 기사에서는 부드러운 자동 스크롤 효과가 있는 적응형 회전식 슬라이더를 만드는 방법에 대해 설명합니다.
현재까지 웹에는 기성 솔루션에 대한 링크가 포함된 수백 개의 리뷰가 있지만 대부분에는 슬라이더의 성능을 크게 저하시키고 사이트 전체의 로드 속도를 늦추는 사용하지 않는 기능이 많이 포함되어 있습니다.  전문 웹 개발자는 라이브러리 및 플러그인 추가에 대한 임계값이 낮고 사용자 정의가 유연한 소프트웨어 제품을 만들기 위해 항상 노력해 왔습니다.  이것이 우리 스크립트가 그러한 슬라이더를 구성하기 위한 최소 요구 사항을 사용하는 이유입니다.  작업의 기능을 사용하면 전환 간격, 속도 및 특정 슬라이드 선택을 설정할 수 있습니다.  다음은 슬라이더 자체의 작동을 제어하는 ​​여러 변수입니다.
시간 목록- 슬라이드 전환 속도
시간보기- 상영시간
라디오하지만- 빠른 탐색을 위한 슬라이드 아래의 버튼.  기본값은 true이며 false를 사용하면 버튼이 사라집니다.
이제 시작하겠습니다!  파일 생성 및 열기 index.htm 
 

 

 

 

 

 

 

 
 

 
제시된 코드에서 볼 수 있듯이 복잡한 것은 없습니다. 슬라이더 랩정의하다 일반 입장슬라이더를 화면 중앙에 맞춥니다.  매개변수 액티브 슬라이드길이에 따라 이미지의 크기와 높이를 설정합니다.  그리고 슬라이더활성 이미지만 표시합니다.
이제 파일을 생성하고 열어봅시다. 스타일.css거기에 필요한 마크업을 작성하세요.
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto");  body ( color: #4f4f5a; font-family: "Roboto", sans-serif; font-size: 16px; padding: 0; margin: 0; ) #slider-wrap( max-width:800px; margin: 0 auto; margin-top: 80px; ) #active-slide ( 너비: 100%; 디스플레이: 테이블; 위치: 상대; 오버플로: 숨김; -webkit-user-select: 없음; -moz-user-select: 없음; -ms- 사용자 선택: 없음; -o-사용자 선택: 없음; 사용자 선택: 없음; ) #slider( 위치: 상대; 너비: calc(100% * 4); 상단: 0; 왼쪽: 0; 여백: 0 ; 패딩: 0, -webkit-transition: 1s, -o-transition: 1s, transition: 1s, -webkit-transition-timing-function: easy-in-out, -o-transition-timing-function: easy-in -out; transition-timing-function: easy-in-out; ) .slide( width: calc(100%/4); list-style: none; display: inline; float: left; ) .slide img ( width: 100%; ) .Radio-But( margin-top:10px; text-align:center; ) .Radio-But .ctrl-select ( margin:2px; display:inline-block; 너비:16px; 높이:16px; overflow :hidden;text-indent:-9999px;background:url(radioBg.p  ng) 중앙 하단 반복 없음;  ) .Radio-But .ctrl-select:hover ( cursor:pointer; background-position:center center; ) .Radio-But .ctrl-select.active ( background-position:center top; ) #prewbutton, #nextbutton ( display :블록, 너비:40픽셀, 높이:100%, 위치:절대, 상단:0, 오버플로:숨김, 텍스트 들여쓰기:-999픽셀, 배경: url("arrowBg.png") 왼쪽 중앙 반복 없음, 불투명도:0.5 ; z-index:3; outline:none !important; ) #prewbutton ( left:10px; ) #nextbutton ( right:10px; background:url(arrowBg.png) 오른쪽 가운데 반복 없음; ) #prewbutton:hover, # 다음버튼:호버(불투명도:1;)
스타일 속성에서 슬라이더 랩써 내려 가다 너비– 사진의 최대 길이.
스타일 속성에서 #slider ( 너비: calc(100% * 4); )그리고 .slide (폭: calc(100%/4); )슬라이더의 사진 수를 지정하십시오.  이 예에서는 4가 있습니다.
앞으로/뒤로 화살표가 슬라이더의 가시성을 방해하는 경우 보이지 않게 만들 수 있으며 호버에 나타납니다.  이렇게 하려면 매개변수에서 prew하지만그리고 다음하지만, 불투명도 속성을 0으로 설정합니다.
이제 파일을 만들고 엽니다. 슬라이더.js, 슬라이더 코드가 포함됩니다.  jQuery 라이브러리를 포함하는 것을 잊지 마십시오.
$(document).ready(function() ( var timeList = 700; var TimeView = 5000; var RadioBut = true; var slideNum = 1; var slideTime; slideCount = $("#slider .slide").length; var animSlide = function(화살표)( clearTimeout(slideTime); if(화살표 == "next")( if(slideNum == slideCount) ( slideNum=1; ) else(slideNum++) translateWidth = -$("#활성-슬라이드") .width() * (slideNum - 1); $("#slider").css(("transform": "translate(" + translateWidth + "px, 0)")); ) else if(화살표 == " prew") ( if(slideNum == 1) ( slideNum=slideCount; ) else(slideNum-=1) translateWidth = -$("#active-slide").width() * (slideNum - 1); $(" #slider").css(("transform": "translate(" + translateWidth + "px, 0)")); )else( slideNum = 화살표; translateWidth = -$("#active-slide").width( ) * (slideNum -1); $("#slider").css(("변환": "translate(" + translateWidth + "px, 0)")); ) $(".ctrl-select.active" ).removeClass("활성"); $(".ctrl-select").eq(slideNum - 1).addClass("활성"); ) if(RadioBut)( var $linkArrow = $("<>").prependTo("#active-slide"); $("#nextbutton").click(function()( animSlide("next"); return false; )) $("#prewbutton").click(function ()( animSlide("prew"); return false; )) ) var adderSpan = ""; $(".slide").each(function(index) ( adderSpan += " " + 인덱스 + "";
 });
 $("
"+adderSpan+"
").appendTo("#slider-wrap"); $(".ctrl-select:first").addClass("active"); $(".ctrl-select").click(function()( var goToNum = parseFloat($(this).text()), animSlide(goToNum + 1); )), var pause = false, var rotator = function()( if(!pause)(slideTime = setTimeout(function()(animSlide) ("다음")), TimeView);) ) $("#slider-wrap").hover(function()(clearTimeout(slideTime); pause = true;), function()(pause = false; rotator() ; )); var 클릭 = 거짓; var prevX; $(".slide").mousedown(function(e)( 클릭 = true; prevX = e.clientX; )); $(".slide").mouseup( function() (클릭 = false; )); $(document).mouseup(function()( 클릭 = false; )); $(".slide").mousemove(function(e)( if(클릭 == true) ) ( if(e.clientX< prevX) { animSlide("next"); clearTimeout(slideTime); }
 if(e.clientX >prevX) ( animSlide("prew"); clearTimeout(slideTime); ) 클릭 = false;  ) ));  $(".slide").hover().css("커서", "포인터");  회전자();  ));
기능 애님슬라이드다음, prew, 숫자 값의 세 가지 종류의 값을 허용합니다.  next 매개변수는 다음 슬라이드를 토글하고 prew는 이전 슬라이드를 반환하며 숫자 값은 슬라이드 아래의 라디오 버튼을 통해 선택한 특정 슬라이드입니다.
제시된 슬라이더는 웹 리소스 https://pixabay.com/의 사진을 사용했습니다.
이것은 jQuery로 작성된 반응형 터치 슬라이더입니다.  이 플러그인의 엔진은 CSS3 애니메이션을 사용하지만 동시에 이전 버전의 브라우저에 대한 대체가 제공됩니다.  Glide.js는 간단하고 가볍습니다.
용법
1. jQuery 포함
유일한 플러그인 종속성은 jQuery이며, 먼저 다음을 포함해야 합니다.
 
2. Glide.js 포함
 
3. HTML 추가
기본 스타일을 연결해 보겠습니다.
 
슬라이더의 html 구조를 롤업해 보겠습니다.
 

 

4. 초기화
기본 설정으로 슬라이더 시작 중...
 
... 또는 사용자 정의
 
설정
사용 가능한 옵션 목록:
매개변수
기본값
유형
설명
자동 재생
4000

정수/부울
자동 스크롤(비활성화하려면 false)
호버 멈춤
진실
부울
슬라이더 위로 마우스를 가져갈 때 자동 스크롤 일시 중지
애니메이션 시간
500

정수
!!!  이 옵션은 브라우저가 css3를 지원하지 않는 경우에 작동합니다.  브라우저에서 css3을 지원하는 경우 .css 파일에서 이 매개변수를 변경해야 합니다!!!
화살
진실
부울/문자열
화살표를 표시/숨기기/첨부합니다.  슬라이더 컨테이너에 화살표를 표시하려면 True입니다.  숨기려면 거짓입니다.  특수 html 코드를 첨부하기 위해 클래스 이름(예: ".class-name")을 지정할 수도 있습니다.
화살표 래퍼 클래스
슬라이더 화살표
끈
화살표가 있는 컨테이너에 할당될 클래스
화살표메인클래스
슬라이더 화살표
끈
모든 화살표의 기본 클래스
화살표 오른쪽 클래스
슬라이더-화살표-오른쪽
끈
오른쪽 화살표 클래스
화살표왼쪽 클래스
슬라이더-화살표-왼쪽
끈
왼쪽 화살표 클래스
화살표오른쪽텍스트
다음
끈
오른쪽 화살표에 대한 텍스트
화살표왼쪽텍스트
이전
끈
왼쪽 화살표에 대한 텍스트
탐색
진실
부울/문자열
슬라이드 탐색을 표시/숨기기/첨부합니다.  표시하려면 참입니다.  숨기려면 거짓
탐색 센터
진실
부울
센터 탐색
navClass
슬라이더 탐색
끈
탐색 컨테이너용 클래스
탐색 항목 클래스
슬라이더 탐색 항목
끈
탐색 요소의 클래스
navCurrentItemClass
Slider-nav__item--현재
끈
현재 탐색 요소의 클래스
건반
진실
부울
왼쪽/오른쪽 버튼을 눌러 슬라이드 스크롤
터치 거리
60

정수/부울
터치 지원(터치).  이 기능을 비활성화하려면 False입니다.
이전 초기화
기능()()
기능
플러그인 초기화 전에 실행될 콜백
후초기화
기능()()
기능
플러그인 초기화 후 실행될 콜백
이전 전환
기능()()
기능
슬라이더를 스크롤하기 전에 실행할 콜백
후전환
기능()()
기능
슬라이더가 스크롤된 후 실행될 콜백
API
API를 사용하려면 glide를 변수에 작성하십시오.
var 글라이드 = $(".slider").glide().data("api_glide");
이제 API 메서드를 사용할 수 있습니다.
Glide.jump(3, console.log("우와!"));
.current() - 현재 쪽 번호를 반환합니다.
.play() - 자동 스크롤 시작
.pause() - 자동 스크롤 중지
.next(콜백) - 슬라이더를 앞으로 스크롤
.prev(callback) - 슬라이더를 뒤로 스크롤
.jump(distance, callback) - 특정 슬라이드로 이동
.nav(target) - 특정 요소에 탐색 연결(예: "body", ".class", "#id")
.arrows(target) - 화살표를 특정 요소에 연결합니다(예: "body", ".class", "#id").

1. jQuery 프레스코 플러그인
반응형 jquery 갤러리(화면 해상도가 변경되면 크기 조정)가 축소판 및 이미지 캡션과 함께 팝업에 표시됩니다.  jquery fresco 갤러리는 IE6+, Firefox 3+, Chrome 5+, Opera 9+를 포함한 대부분의 브라우저에서 올바르게 작동합니다.  이 플러그인의 무료 버전은 비상업적 프로젝트에서만 사용할 수 있습니다.
2. "어댑터" 슬라이더


다양한 전환 효과가 있는 슬라이더(3D를 포함한 7가지 다른 효과).  Github에서 프로젝트.
3. 다양한 효과를 가진 슬라이더 플러그인 "jQ-Tiles"


자동 스크롤 기능이 있는 조정 가능한 슬라이드 속도와 다양한 전환 효과가 있는 플러그인입니다.
4. jQuery 플러그인 "Sly"


수직 및 수평 스크롤러를 구현하는 플러그인입니다.  Github에서 프로젝트.
5. 애니메이션 CSS3 마키수 메뉴


6. 간단한 슬라이드쇼


7. 기능성 jQuery 슬라이더 "iView Slider v2.0"


콘텐츠 슬라이더/슬라이드쇼(슬라이드는 이미지뿐만 아니라 비디오 클립 및 기타 HTML 콘텐츠도 될 수 있음).  탐색의 경우 축소판, 왼쪽/오른쪽 버튼 및 키보드 사용을 사용할 수 있습니다.  Github.com의 프로젝트.
8. jQuery 플러그인 "Vanity" 세트


세트에는 7개의 플러그인이 있습니다: jSlider, jTabs, jPaginate, jSpotlight, jTip, jPlaceholder 및 jCollapse.  이러한 솔루션 세트는 슬라이더, 도구 설명, 탭, 이미지 팝업 등을 구현하는 데 도움이 됩니다.
9. 호버 CSS3 효과


10. CSS3 드롭다운 메뉴


11. iOS 슬라이더


모바일 장치에서 작동하도록 설계된 슬라이더입니다.
12. CSS3 로딩 표시기


13. CSS3 호버 효과


14. "제품 컬러라이저" jQuery 플러그인


플러그인은 다양한 색상의 제품을 볼 수 있는 경량 솔루션입니다(예: 온라인 의류 매장과 관련하여 방문자가 선택할 수 있도록 색 구성표여러 옵션의 제품).  플러그인에는 각 제품에 대해 두 개의 이미지만 필요합니다(모든 색상이 마스크로 겹쳐짐).  플러그인은 IE7+를 포함한 모든 주요 브라우저에서 작동합니다(PNG 투명도 표시를 수정하면 IE6에서도 작동합니다).  GitHub의 프로젝트.
15. CSS3 애니메이션 차트


16. 이미지 클릭 시 오버레이 효과 생성


이미지를 클릭하면 이미지가 어두워지고 배경으로 이동하며 캡션이 있는 단락이 나타납니다.  따라서 이미지에 있는 요소에 대한 간략한 설명을 제공할 수 있습니다.
17. 드롭다운 메뉴 형태의 페이지 탐색


드롭다운 메뉴 형태로 편리한 문서 탐색을 구현하기 위한 솔루션입니다.  콘텐츠는 화면 상단에 고정되어 항상 방문자의 시야에 남아 있습니다.  메뉴에서 섹션을 선택하면 페이지가 문서의 선택된 부분으로 부드럽게 스크롤됩니다.
18. 호버 효과가 있는 CSS3 갤러리


이미지 위로 마우스를 가져가면 사진이 빠르게 변경됩니다.  갤러리는 두 가지 버전으로 구현됩니다. 방문자가 갤러리에서 커서를 이동한 후 나타나는 사진에 대한 설명과 설명이 없는 것입니다.
19. jQuery 시차 슬라이더


20. 블록의 CSS3 호버 애니메이션


21. CSS3 jQuery 팝업 패널
데모 페이지에서 화면 하단의 화살표를 클릭하면 팝업 아이콘이 나타납니다.
22. 무료 HTML5 이미지 갤러리 "Juicebox Lite"


사이트에 대한 매우 기능적인 새 이미지 갤러리입니다.  갤러리는 썸네일을 포함하거나 포함하지 않을 수 있으며, 이미지에 대한 설명을 포함하거나 포함하지 않고 전체 화면으로 확장하거나 고정 크기의 페이지에 표시할 수 있습니다.  데모 페이지에서 원하는 갤러리 종류를 선택할 수 있습니다.  갤러리의 무료 버전을 다운로드할 수 있습니다.  고급 기능을 사용하고 개발자 로고를 제거하려면 비용을 지불해야 합니다.
23. 플러그인 "JQVMap"


24. CSS3 시차 슬라이더


25. 썸네일이 있는 jQuery 사진 갤러리


반응형 갤러리, 이미지 및 썸네일 크기는 브라우저 창의 크기에 따라 변경됩니다.
26. jQuery 콘텐츠 슬라이더 플러그인 "Horinaja"


플러그인은 설치하기 쉽고 사용자 정의가 가능하며 브라우저 간입니다.  모든 HTML 콘텐츠는 이미지가 아니라 슬라이드 역할을 할 수 있습니다.  커서가 슬라이드 영역에 있는 동안 마우스 휠을 사용하여 슬라이드를 스크롤할 수 있습니다.
27. jQuery Pikachoose 슬라이더 플러그인


세 가지 변형: 설명 및 축소판 없이 이미지의 간단한 변경 구현;  이미지 캡션과 썸네일이 있는 슬라이더;  썸네일이 있는 슬라이더와 FancyBox 효과가 있는 팝업 창에서 더 큰 이미지 열기를 추가했습니다.  최신 버전은 항상 Github에서 찾을 수 있습니다.
28. 드롭다운을 위한 몇 가지 사용자 정의 CSS 스타일


다양한 CSS 기술을 사용하는 5가지 다른 스타일의 드롭다운.
29. 애니메이션 3D 효과가 있는 레스토랑 메뉴


페이지에 대한 정보의 흥미로운 CSS jQuery 프레젠테이션.  링크를 클릭하면 소책자 메뉴가 열리고 방문자는 팝업 창에서 제공되는 요리에 대해 자세히 읽을 수 있습니다.  IE에서 애니메이션이 올바르게 표시되지 않습니다.
30. Elastislide 플러그인


고무의 구현 적응형 회전 목마(이미지의 수직 및 수평 캐러셀) 및 이미지 갤러리.  브라우저 창을 축소하면 이미지의 수를 일정 최소값으로 줄인 다음 나머지 이미지의 크기를 조정합니다.  Github에서 프로젝트.
31. 신선한 CSS3 jQuery 슬릿 슬라이더


반응형 슬라이더 플러그인(폭은 백분율로 설정할 수 있으며 자동으로 크기 조정됨) 슬라이드를 변경할 때 흥미로운 애니메이션 효과가 있는 두 가지 스타일(슬라이드가 반으로 절단되고 다른 방향으로 이동하고 새 슬라이드가 그 자리를 차지함).  키보드 탐색이 가능합니다.  최신 버전은 항상 Github에 있습니다.
32. 3D 이미지 슬라이더 "슬라이스박스"의 새 버전


새 버전변경 사항 및 새로운 기능 추가: 이제 3D 슬라이더가 확장 가능하게 되었으며 브라우저 창을 축소할 때 이를 볼 수 있습니다.  Firefox에 대한 지원이 추가되었습니다.  슬라이드 설명에서 이미 HTML 콘텐츠를 사용할 수 있습니다(이전에는 HTML 태그를 사용할 수 없는 링크 속성에서 설명을 가져왔습니다).  데모 페이지에서 플러그인 사용을 위한 4가지 옵션을 볼 수 있습니다. 최신 버전 Github.com에 살고 있습니다.
효과는 3D CU3ER 플래시 갤러리(데모, 다운로드)와 매우 유사합니다. 이 3D 슬라이더만 플래시 기술의 도움이 아니라 자바스크립트의 도움으로 만들어집니다.
33.jQuery 플러그인 "PFold"


실험적 솔루션.  플러그인은 노트 전개를 모방하여 3D 효과를 구현합니다. 다양한 옵션실행: 3턴, 2턴, 확장된 음표를 중심으로 하는 턴.
34.jQuery 플러그인 "Windy"


이미지와 같은 콘텐츠를 탐색하기 위한 플러그인입니다.  사진을 스크롤할 때 사진이 다른 방향으로 흩어집니다(효과는 카드 게임포커).  탐색의 경우 왼쪽/오른쪽 버튼 또는 슬라이더를 사용할 수 있습니다(다른 옵션은 데모 페이지 참조).  프로젝트