이 기사는 주로 JavaScript 플러그인 -Carousel을 배웁니다. 더 이상 고민하지 않고 공부하십시오. 전체 자습서는 Bootstrap 3.0 튜토리얼을 볼 수 있습니다
회전 목마
다음은이 플러그인 및 관련 구성 요소로 만든 회전 목마 케이스입니다.
<body> <div id = "carousel-example-generic"data-ride = "carousel"> <!-표시기-> <ol> <li data-target = "#carousel-example-generic"data-slide-to = "0"> </li> <li data-target = "#carousel-example-generic"data-leneric "to ="1 "> <li> </li> </li> Data-target = "#carousel-example-generic"data-slide-to = "2"> </li> </ol> <!-슬라이드 용 래퍼-> <div style = "text-align : center"> <div> <img>/img> </div> <img>/img> </div> <img> </div> <!-control> <! href = "#carousel-example-generic"data-slide = "prev"> <span> </span> </a> <a href = "#carousel-example-generic"data-slide = "next"> <span> </span> </a> </div> <script src = "js/jquery-2.0.3.3.min.js"> src = "js/bootstrap.min.js"> </script> <script type = "text/javaScript"> // $ ( '. carousel'). carousel ( 'next'); </script> </body>
Internet Explorer 8 & 9는 전환 애니메이션 효과를 지원하지 않습니다.
부트 스트랩은 CSS3을 기반으로 애니메이션 효과를 구현하지만 Internet Explorer 8 & 9는 이러한 필요한 CSS 속성을 지원하지 않습니다. 따라서 두 브라우저를 모두 사용할 때 전환 애니메이션 효과가 손실됩니다. 또한 Bootstrap은 jQuery 기반 대체 기능을 사용하지 않습니다.
선택적 옵션
모든 .item에서는 각 슬라이드에 .carousel- 캡션을 추가 할 수 있습니다. 자동으로 배열되고 형식화되는 HTML 코드를 추가 할 수도 있습니다.
<div> <img>/img> <div> <h4> 첫 번째 썸네일 레이블 </h4> <p> cras justo odio, dapibus ac facilisis in, egestas eget quam. Eget Metus에서 Donec id elit non mi porta gravida. NULLAM ID DOLOR ID NIBH ULTRICIES VEHICULA UT ID ELIT. </p> </div> </div>
세 가지 항목을 추가하면 효과가 평가됩니다.
접근성 문제
회전식 구성 요소는 접근성 표준과 호환되지 않습니다. 호환성이 필요한 경우 슬라이드를 제시하기위한 다른 옵션을 고려하십시오.
데이터 속성을 통한 사용
데이터 속성은 회전식의 위치를 쉽게 제어 할 수 있습니다. 데이터 슬라이드는 재생 위치를 제어하는 이전 또는 다음 키워드를 수락 할 수 있습니다. 또한 0으로 시작하는 슬라이드 첨자는 데이터 슬라이드로 전달 될 수도 있습니다.
Data-Ride = "Carousel"속성은 페이지가로드 된 후 시작된 회전식 구성 요소를 표시하는 데 사용됩니다.
가장 바깥 쪽 회전 목마 용기에 추가하십시오
<div id = "carousel-example-generic"data-Ride = "Carousel">
JavaScript를 통해
수동으로 회전식 구성 요소를 시작합니다 (위의 데이터 리드 속성을 사용하여 회전식 구성 요소를 자동으로 켭니다.) : : :
$ ( '. carousel'). carousel ()
옵션
데이터 속성 또는 JavaScript를 통해 옵션을 전달할 수 있습니다. 데이터 속성의 경우 Data-InterVal = ""와 같은 데이터 다음에 옵션 이름을 넣어야합니다.
방법
$ ( ""). 회전식 (옵션)
회전식 구성 요소를 초기화하고 선택적 객체 유형 옵션 매개 변수를 수락 한 다음 슬라이드 루프를 시작하십시오.
$ ( '. carousel'). Carousel ({interval : 2000}).Carousel ( 'Cycle')은 각 프레임을 왼쪽에서 오른쪽으로 고정시킵니다.
.carousel ( 'pause')은 회전 목마를 중지합니다.
.carousel (숫자) 회전 목마를 지정된 프레임에 배치합니다 (프레임 첨자는 배열과 유사하게 0으로 시작합니다).
.carousel ( 'prev')은 이전 프레임으로 돌아갑니다.
.carousel ( 'Next') 다음 프레임으로 이동합니다.
이벤트
Bootstrap의 회전식 구성 요소는 청취를위한 두 가지 이벤트를 노출시킵니다.
$ ( '#carousel-example-generic'). on ( 'slide.bs.carousel', function () {alert (1);})이는 이벤트를 회전식 구성 요소에 바인딩 한 다음 해당 런타임에서 실행합니다. 이것은 이전 JavaScript 플러그인에서 많이 설명되었으며 양식은 모두 일반적이므로 사용할 수 있습니다.
그림
이것들은 몇 가지 더 실용적인 사진 회전 목마 플러그인으로, 결과가 매우 좋습니다. 합리적으로 사용하면 항상 페이지에 포인트를 추가합니다. 모든 사람의 학습에 도움이되기를 바랍니다.
만족하지 않으면 심도있는 연구를 위해이 기사를 확인할 수 있습니다. "Bootstrap Learning Tutorial"의 편집자가 귀하와 함께 진행합니다!
여전히 심도있게 공부하고 싶다면 여기를 클릭하여 두 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 실용 튜토리얼
부트 스트랩 플러그인 사용 튜토리얼
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.