부트스트랩 캐러셀


Bootstrap Carousel 플러그인

Bootstrap Carousel 플러그인은 사이트에 슬라이더를 추가하는 유연하고 반응이 빠른 방법입니다. 그 외에도 콘텐츠는 충분히 유연하며 이미지, iframe, 비디오 또는 배치하려는 기타 유형의 콘텐츠가 될 수 있습니다.

이 플러그인의 기능을 별도로 참조하려면 carousel.js을 참조해야 합니다. 또는 Bootstrap 플러그인 개요 장에서 언급한 대로 bootstrap.js 또는 bootstrap.min.js의 축소된 버전을 참조할 수 있습니다.

예

다음은 Bootstrap Carousel 플러그인을 사용하여 요소를 반복하는 공통 구성 요소를 표시하는 간단한 슬라이드쇼입니다. 캐러셀을 구현하려면 해당 태그가 포함된 코드를 추가하기만 하면 됩니다. 데이터 속성을 사용할 필요가 없으며 간단한 클래스 기반 개발만 하면 됩니다.

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 简单的轮播（Carousel）插件</title>
  <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div id="myCarousel" class="carousel slide">
   <!-- 轮播（Carousel）指标 -->
   <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
   </ol>   
   <!-- 轮播（Carousel）项目 -->
   <div class="carousel-inner">
      <div class="item active">
         <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
      </div>
      <div class="item">
         <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
      </div>
      <div class="item">
         <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
      </div>
   </div>
   <!-- 轮播（Carousel）导航 -->
   <a class="carousel-control left" href="#myCarousel" 
      data-slide="prev">‹</a>
   <a class="carousel-control right" href="#myCarousel" 
      data-slide="next">›</a>
</div> 

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

제목 선택

.item 내에서 .carousel-caption 요소를 전달할 수 있습니다. 슬라이드에 제목을 추가합니다. 여기에 선택적 HTML을 배치하면 자동으로 정렬되고 서식이 지정됩니다. 다음 예는 이를 보여줍니다.

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 轮播（Carousel）插件的标题</title>
   <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div id="myCarousel" class="carousel slide">
   <!-- 轮播（Carousel）指标 -->
   <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
   </ol>   
   <!-- 轮播（Carousel）项目 -->
   <div class="carousel-inner">
      <div class="item active">
         <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
         <div class="carousel-caption">标题 1</div>
      </div>
      <div class="item">
         <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
         <div class="carousel-caption">标题 2</div>
      </div>
      <div class="item">
         <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
         <div class="carousel-caption">标题 3</div>
      </div>
   </div>
   <!-- 轮播（Carousel）导航 -->
   <a class="carousel-control left" href="#myCarousel" 
      data-slide="prev">‹</a>
   <a class="carousel-control right" href="#myCarousel" 
      data-slide="next">›</a>
</div> 


</body>
</html>

인스턴스 실행»

온라인 예를 보려면 "인스턴스 실행" 버튼을 클릭하세요

Usage

  • 데이터 속성별: 데이터 사용 캐러셀의 위치를 ​​쉽게 제어할 수 있습니다.

    • 속성 data-slide는 현재 위치를 기준으로 슬라이드의 위치를 ​​변경하는 데 사용되는 prev 또는 next 키워드를 허용합니다.

    • data-slide-to를 사용하여 원시 슬라이드 인덱스를 캐러셀에 전달합니다. data-slide-to="2"는 슬라이더를 0부터 계산하여 특정 인덱스로 이동합니다.

    • data-ride="carousel" 속성은 페이지가 로드될 때 애니메이션을 시작하도록 캐러셀을 표시하는 데 사용됩니다.

  • JavaScript를 통해: Carousel은 다음과 같이 JavaScript를 통해 수동으로 호출할 수 있습니다.

$('.carousel').carousel()

Options

일부 옵션은 데이터 속성 또는 JavaScript를 통해 전달됩니다. 다음 표에는 옵션이 나열되어 있습니다.

옵션 이름 유형/기본값 데이터 속성 이름 설명
간격번호
기본값: 5000		데이터 -간격 각 항목 사이에 지연된 시간을 자동으로 반복합니다. false인 경우 캐러셀은 자동으로 반복되지 않습니다.
pausestring
기본값: "hover"		data-pause마우스가 들어갈 때 캐러셀 루프를 일시 중지하고 마우스가 떠날 때 캐러셀 루프를 다시 시작합니다.
wrapboolean
기본값: true		data-wrap캐러셀이 계속 반복되는지 여부입니다.

Methods

Carousel 플러그인의 유용한 메소드는 다음과 같습니다. 사용 가능한 캐러셀을 초기화합니다. 옵션 개체를 선택합니다. 항목을 반복하기 시작합니다. 

$('#identifier').carousel({
  interval: 2000
})
.carousel('cycle') 캐러셀 항목을 왼쪽에서 오른쪽으로 순환합니다. 
$('#identifier').carousel('cycle')
.carousel('pause')캐러셀 루프 항목을 중지합니다. 
$('#identifier').carousel('pause')
.carousel(number)특정 프레임으로 반복합니다(배열과 유사하게 0부터 계산됩니다). 
$('#identifier').carousel(number)
.carousel('prev')이전 항목으로 순환합니다. 
$('#identifier').carousel('prev')
.carousel('next')다음 항목으로 순환합니다. 
$('#identifier').carousel('next')
Instance
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 轮播（Carousel）插件方法</title>
  <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div id="myCarousel" class="carousel slide">
   <!-- 轮播（Carousel）指标 -->
   <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" 
         class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
   </ol>   
   <!-- 轮播（Carousel）项目 -->
   <div class="carousel-inner">
      <div class="item active">
         <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
      </div>
      <div class="item">
         <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
      </div>
      <div class="item">
         <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
      </div>
   </div>
   <!-- 轮播（Carousel）导航 -->
   <a class="carousel-control left" href="#myCarousel" 
      data-slide="prev">‹</a>
   <a class="carousel-control right" href="#myCarousel" 
      data-slide="next">›</a>
   <!-- 控制按钮 -->
   <div style="text-align:center;">
      <input type="button" class="btn start-slide" value="Start">
      <input type="button" class="btn pause-slide" value="Pause">
      <input type="button" class="btn prev-slide" value="Previous Slide">
      <input type="button" class="btn next-slide" value="Next Slide">
      <input type="button" class="btn slide-one" value="Slide 1">
      <input type="button" class="btn slide-two" value="Slide 2">            
      <input type="button" class="btn slide-three" value="Slide 3">
   </div>
</div> 
<script>
   $(function(){
      // 初始化轮播
      $(".start-slide").click(function(){
         $("#myCarousel").carousel('cycle');
      });
      // 停止轮播
      $(".pause-slide").click(function(){
         $("#myCarousel").carousel('pause');
      });
      // 循环轮播到上一个项目
      $(".prev-slide").click(function(){
         $("#myCarousel").carousel('prev');
      });
      // 循环轮播到下一个项目
      $(".next-slide").click(function(){
         $("#myCarousel").carousel('next');
      });
      // 循环轮播到某个特定的帧 
      $(".slide-one").click(function(){
         $("#myCarousel").carousel(0);
      });
      $(".slide-two").click(function(){
         $("#myCarousel").carousel(1);
      });
      $(".slide-three").click(function(){
         $("#myCarousel").carousel(2);
      });
   });
</script>


</body>
</html>
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
Instance아래 예는
Run Instance»

이벤트

Down 다음 표에는 Carousel 플러그인에서 사용되는 이벤트가 나열되어 있습니다. 이러한 이벤트는 함수의 후크로 사용될 수 있습니다.

Event

DescriptionInstance

slide.bs.carousel

이 이벤트는 슬라이드 인스턴스 메소드가 호출되는 즉시 트리거됩니다. 

$('#identifier').on('slide.bs.carousel', function () {
  // 执行一些动作...
})
slid.bs.carousel이 이벤트는 캐러셀이 슬라이드 전환 효과를 완료할 때 트리거됩니다. 
$('#identifier').on('slid.bs.carousel', function () {
  // 执行一些动作...
})
Instance
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 轮播（Carousel）插件事件</title>
   <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div id="myCarousel" class="carousel slide">
   <!-- 轮播（Carousel）指标 -->
   <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" 
         class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
   </ol>   
   <!-- 轮播（Carousel）项目 -->
   <div class="carousel-inner">
      <div class="item active">
         <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
      </div>
      <div class="item">
         <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
      </div>
      <div class="item">
         <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
      </div>
   </div>
   <!-- 轮播（Carousel）导航 -->
   <a class="carousel-control left" href="#myCarousel" 
      data-slide="prev">‹</a>
   <a class="carousel-control right" href="#myCarousel" 
      data-slide="next">›</a>
</div> 
<script>
   $(function(){
      $('#myCarousel').on('slide.bs.carousel', function () {
         alert("当调用 slide 实例方法时立即触发该事件。");
      });
   });
</script>

</body>
</html>
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
Instance다음 예에서는 이벤트 사용법을 보여줍니다.
인스턴스 실행 »