jQuery 슬라이드쇼에서 플러그인 owlcarousel 사용하기(자세한 튜토리얼)-JS 튜토리얼-php.cn

jQuery 슬라이드쇼에서 플러그인 owlcarousel 사용하기(자세한 튜토리얼)

亚连

풀어 주다： 2018-06-04 13:50:24

원래의

5251명이 탐색했습니다.

jQuery 슬라이드쇼 플러그인 owlcarousel은 IE6 이상의 모든 브라우저와 호환되는 작고 강력하며 호환성이 뛰어난 슬라이드쇼 플러그인입니다. 이 기사에서는 주로 단어 사용, 중국어 매개변수 및 API 지침을 소개합니다.

Owl Carousel은 강력하고 실용적인 플러그인입니다. 그러나 jQuery 슬라이드 쇼 플러그인은 다음과 같은 기능이 있습니다. 형식

진행률 표시줄 지원
사용자 정의 이벤트 지원
지연 로딩 지원
적응형 높이 지원
브라우저 호환성: IE6, IE7을 포함한 모든 브라우저와 호환됩니다.
Owl Carousel 사용 방법
새 HTML 파일 만들기

<link href="css/owl.carousel.css" rel="external nofollow" rel="stylesheet">
<link href="css/owl.theme.css" rel="external nofollow" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/owl.carousel.js"></script>

로그인 후 복사

2.JavaScript

<p id="owl-demo" class="owl-carousel">
 <p>1</p>
 <p>2</p>
 <p>3</p>
 <p>4</p>
 <p>5</p>
 <p>6</p>
 <p>7</p>
 <p>8</p>
</p>

로그인 후 복사

booleanBoolean ㅋㅋㅋ jQuery 선택기 windowbaseClassstringowl-carouselCSS를 추가합니다. 필요하지 않으면 themestringowl- theme테마 스타일은 직접 추가할 수 있습니다. 요구 사항을 충족하세요lazyLoadBooleanfalseLazy loadinglazyFollowBooleantrue페이지 매김 사용 시 페이지를 넘으면 탐색 시 사진이 페이지를 건너뜁니다. 않을 것이다 로드하면 표시할 페이지의 사진만 로드됩니다. false로 설정하면 페이지를 건너뛰는 사진이 로드됩니다. lazyLoadlazyEffectBoolean value/stringfade의 하위 옵션입니다. 지연된 로딩 이미지 표시 효과 기본값은 400밀리초입니다. false인 경우 효과가 없습니다. Usedloop Boolean false무한 루프autoHeightBoolean false자동 높이 사용jsonPath StringfalseJSON 파일 경로jsonSuccess 함수 false사용자 정의 JSON 형식을 처리하는 함수dragBeforeAnimFinishBoolean true전환 완료 여부 무시(드래그만) mouseDrag부울 true마우스 이벤트 끄기/켜기marginInteger0슬라이드 간격touchDragBooleantrue터치 이벤트 끄기/켜기 addClassActive 부울 값 false표시 항목에 "활성" 클래스 추가transitionStyleStringfalseCSS3 전환 효과 추가

owlcarousel 콜백 함수

Parameters	Type	기본값	Description
items	Integer	5	페이지당 표시되는 슬라이드 수
ite msDesktop	array	[1199, 4]	브라우저 너비와 표시되는 슬라이드 수를 [X,Y] 형식으로 설정합니다. 여기서 페이지는 4페이지를 표시합니다. 이 매개변수는 주로 반응형 디자인에 사용됩니다. false를 사용할 수도 있습니다
itemsDesktopSmall	Array	[979,3]	위와 동일
itemsTablet	Array	[768,2]	위와 동일
items태블릿소형	array	false	위와 동일, 기본값은 false
itemsMobile	array	[479,1]	위와 동일
itemsCustom	array	거짓
singleItem	Boolean	false	한 개만 표시할지 여부
itemsScaleUp	Boolean	false
slideSpeed	정수	200	밀리초 단위의 슬라이드 전환 속도
paginationSpeed	Integer	800	페이지 전환 속도(밀리초)
rewindSpeed	Integer	1000	되감기 속도(밀리초)
autoPlay	boolean/integer	false	자동 재생, 선택적 부울 값 또는 정수를 사용하는 경우(예: 3000)는 3초마다 전환한다는 의미입니다. true로 설정하면 기본값은 5초마다 전환됩니다
stopOnHover	부울 값	false	자동 재생을 중지하려면 마우스를 올리세요
navigation	boolean	false	Show "previous", "next"
navigationText	array	["prev","next"]	"를 설정하세요. 이전" 및 "다음" 텍스트, 기본값은 ["이전", "다음"]
rewindNav	부울 값	true	첫 번째 값으로 슬라이드
scrollPerPage	부울 값	false	항목당 대신 페이지당 스크롤
pagination	boolean	true	paginationNumbers
false	Page 버튼에는 숫자가 표시됩니다		반응형


	을 사용하지 않는 것이 가장 좋습니다.

functionfunction 전 콜백 함수 초기화 functionfunctionfunctionfunctionfunctionowlcarousel 맞춤 이벤트

Variable	Type	기본값	Description
beforeUpdate	Function	false	응답 후 콜백 기능
afterUpdate	기능	false	beforeInit
false	전 콜백 함수에 대한 응답		afterInit
false	초기화 후 콜백 기능		beforeMove
false	이동 전 콜백 함수		afterMove
false	이동 후 콜백 함수		afterAction
false	초기화 후 콜백 기능		startDragged
false	드래깅의 콜백 함수		afterLazyLoad
false	지연 로딩 후의 콜백 함수

이벤트Descriptionowl.prev to 이전to next자동으로 재생하려면 매개변수를 재생 속도로 전달할 수 있습니다. 자동 재생 중지숫자로 점프 애니메이션 없이 숫자로 점프 위 내용은 제가 모두를 위해 편집한 것입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다. 관련 기사: