jQuery 슬라이드 플러그 인 Owl Carousel

간단 한 소개
Owl Carousel 은 강력 하고 실 용적 이지 만 작고 작은 jQuery 슬라이드 플러그 인 으로 특징 이 있 습 니 다.

모든 브 라 우 저 호 환

지원 응답 식

CSS 3 과잉 지원

터치 이벤트 지원

JSON 및 사용자 정의 JSON 형식 지원

진도 조 지원

사용자 정의 이벤트 지원

로드 지연 지원

자가 적응 높이 지원

……

Owl Carousel 은 많은 인자, 리 셋 함수 와 사용자 정의 이벤트 (구체 적 으로 아래 를 탐색 하 십시오) 를 제공 하기 때문에 거의 모든 요 구 를 만족 시 킬 수 있 습 니 다.
겸용 하 다
브 라 우 저 호 환: IE6, IE7 을 포함 한 모든 브 라 우 저 를 호 환 합 니 다.
jQuery 호 환: 1.7 이상 버 전 호 환.
사용 방법
1. 파일 도입

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

2、HTML

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

3、JavaScript

$(function(){
    $('#owl-example').owlCarousel();
});

매개 변수
매개 변수
유형
기본 값
설명 하 다.
items
정수
5
슬라이드
itemsDesktop
배열
[1199,4]
브 라 우 저 너비 와 슬라이드 의 보 이 는 개 수 를 설정 합 니 다. 형식 은 [X, Y] 이 고 X 는 브 라 우 저 너비 이 며 Y 는 보 이 는 개수 입 니 다. 예 를 들 어 [1199, 4] 는 브 라 우 저 너비 가 1199 보다 작 으 면 페이지 당 4 장 을 표시 합 니 다. 이 매개 변 수 는 주로 응답 식 디자인 에 사 용 됩 니 다.false 도 사용 할 수 있어 요.
itemsDesktopSmall
배열
[979,3]
위 와 같다
itemsTablet
배열
[768,2]
위 와 같다
itemsTabletSmall
배열
false
기본 값 은 false
itemsMobile
배열
[479,1]
위 와 같다
itemsCustom
배열
false
 
singleItem
불 값
false
한 장만 보일 지 여부
itemsScaleUp
불 값
false
 
slideSpeed
정수
200
슬라이드 전환 속도, 밀리초 단위
paginationSpeed
정수
800
페이지 전환 속도, 밀리초 단위
rewindSpeed
정수
1000
리 턴 속도, 밀리초 단위
autoPlay
불 값 / 정수
false
자동 재생, 불 값 이나 정 수 를 선택 할 수 있 습 니 다. 정수, 예 를 들 어 3000 을 사용 하면 3 초 에 한 번 전환 하 는 것 을 표시 합 니 다.true 로 설정 하면 기본 5 초 에 한 번 전환 합 니 다.
stopOnHover
불 값
false
마우스 서 스 펜 션 자동 재생 정지
navigation
불 값
false
"이전", "다음" 보이 기
navigationText
배열
[“prev”,”next”]
"이전", "다음" 문 자 를 설정 합 니 다. 기본 값 은 ["prev", "next"] 입 니 다.
rewindNav
불 값
true
첫 번 째 로 미 끄 러 집 니 다.
scrollPerPage
불 값
false
항목 마다 스크롤 하 는 것 이 아니 라 페이지 마다 스크롤 합 니 다.
pagination
불 값
true
페이지 표시
paginationNumbers
불 값
false
페이지 단추 숫자 표시
responsive
불 값
true
 
responsiveRefreshRate
정수
200
200 밀리초 마다 창 폭 을 측정 하고 해당 하 는 조정 을 하 며 주로 응답 식 에 사 용 됩 니 다.
responsiveBaseWidth
jQuery 선택 기
window
 
baseClass
문자열
owl-carousel
CSS 를 추가 합 니 다. 필요 하지 않 으 면 사용 하지 않 는 것 이 좋 습 니 다.
theme
문자열
owl-theme
테마 스타일, 요구 에 맞 게 스스로 추가 할 수 있 습 니 다.
lazyLoad
불 값
false
로드 지연
lazyFollow
불 값
true
페이지 를 나 눌 때 페이지 를 넘 어 탐색 하면 페이지 를 건 너 뛰 는 그림 을 불 러 오지 않 고 표시 할 페이지 의 그림 만 불 러 옵 니 다. false 로 설정 하면 페이지 를 건 너 뛰 는 그림 을 불 러 옵 니 다.이것 은 lazyLoad 의 하위 옵션 입 니 다.
lazyEffect
불 값 / 문자열
fade
그림 불 러 오 기 를 지연 시 키 는 디 스 플레이 효 과 는 기본적으로 400 밀리초 로 들 어 갑 니 다. false 이면 효 과 를 사용 하지 않 습 니 다.
autoHeight
불 값
false
자동 사용 높이
jsonPath
문자열
false
JSON 파일 경로
jsonSuccess
함수.
false
사용자 정의 JSON 형식의 함수 처리
dragBeforeAnimFinish
불 값
true
과도 한 완료 여부 무시 (드래그 만 가능)
mouseDrag
불 값
true
마우스 이벤트 닫 기 / 열기
touchDrag
불 값
true
터치 이벤트 닫 기 / 열기
addClassActive
불 값
false
보 이 는 항목 에 "active" 클래스 를 추가 합 니 다.
transitionStyle
문자열
false
CSS 3 과도 한 효과 추가
리 턴 함수
변량
유형
기본 값
설명 하 다.
beforeUpdate
함수.
false
응답 후 리 셋 함수
afterUpdate
함수.
false
이전 리 셋 함수 에 응답
beforeInit
함수.
false
이전 반전 함수 초기 화
afterInit
함수.
false
초기 화 후의 반전 함수
beforeMove
함수.
false
이동 전 리 셋 함수
afterMove
함수.
false
이동 후의 반전 함수
afterAction
함수.
false
초기 화 후의 반전 함수
startDragging
함수.
false
드래그 반전 함수
afterLazyLoad
함수.
false
로드 지연 후의 리 셋 함수
사용자 정의 이벤트
이벤트
설명 하 다.
owl.prev
이전
owl.next
다음
owl.play
자동 재생, 재생 속도 로 매개 변 수 를 전달 할 수 있 습 니 다.
owl.stop
자동 재생 중지
owl.goTo
몇 번 째 로 뛰 어 요?
owl.jumpTo
애니메이션 을 사용 하지 않 고 몇 번 째 로 건 너 뛰 기
 
 

   JSON



    <div id="owl-demo" class="owl-carousel">
    </div>



    #owl-demo {
        width: 900px;
        margin-left: auto;
        margin-right: auto;
    }
    #owl-demo .item {
        display: block;
        margin: 5px;
    }
    #owl-demo img {
        display: block;
        width: 100%;
        border: 0 none;
    }



    {
        "items" : [
            {
                "img": "img/owl1.jpg",
                "alt" : "Owl Image 1",
                "link" : "http://www.dowebok.com/"
            },
            {
                "img": "img/owl2.jpg",
                "alt" : "Owl Image 2",
                "link" : "http://www.dowebok.com/93.html"
            },
            {
                "img": "img/owl3.jpg",
                "alt" : "Owl Image 3",
                "link" : "http://www.dowebok.com/92.html"
            },
            {
                "img": "img/owl4.jpg",
                "alt" : "Owl Image 4",
                "link" : "http://www.dowebok.com/91.html"
            },
            {
                "img": "img/owl5.jpg",
                "alt" : "Owl Image 5",
                "link" : "http://www.dowebok.com/90.html"
            },
            {
                "img": "img/owl6.jpg",
                "alt" : "Owl Image 6",
                "link" : "http://www.dowebok.com/89.html"
            },
            {
                "img": "img/owl7.jpg",
                "alt" : "Owl Image 7",
                "link" : "http://www.dowebok.com/88.html"
            },
            {
                "img": "img/owl8.jpg",
                "alt" : "Owl Image 8",
                "link" : "http://www.dowebok.com/87.html"
            }
        ]
    }



    $(function(){
        $('#owl-demo').owlCarousel({
            items: 4,
            jsonPath: 'json/customData.json',
            jsonSuccess: customDataSuccess
        });
     
        function customDataSuccess(data){
            var content = '';
            for(var i in data['items']){
                var img = data['items'][i].img;
                var alt = data['items'][i].alt;
                var link = data['items'][i].link;
                content += '<a class="item" href="' +link+ '"><img src="' +img+ '" alt="' +alt+ '">';
            }
            $('#owl-demo').html(content);
        }
    });