Thực hiện twitter bootstrap carousel v2.3.2

Question

Tôi gặp sự cố khi triển khai băng chuyền bootstrap. Bất cứ ai có thể nhìn vào html và js sau đây và cho tôi hướng dẫn về cách thực hiện các slide. .js chưa được chỉnh sửa và băng chuyền được cài đặt trên đơn vị anh hùng cơ thể. Tôi có thực hiện api băng chuyền không? Làm cách nào để xác định băng chuyền tôi đang sử dụng trong tệp .js? Cảm ơn.

<div class="carousel"> 

    <!-- Carousel items --> 
    <div class="carousel-inner"> 

     <!-- Main hero unit for a primary marketing message or call to action --> 
     <div class="hero-unit"> 
     <h1>Hello, world!</h1> 
     <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p> 
     <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p> 
     </div> 

    </div>  

<!-- Carousel nav --> 

    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 

    </div> 

Answer 1

Các tài liệu cho Bootstrap Carousel có sẵn ở đây: http://twitter.github.com/bootstrap/javascript.html#carousel

Tôi đoán bạn sẽ cần phải thêm một cái gì đó như thế này để làm cho nó chạy:

<script type="text/javascript"> 
$(function(){ 
    $('.carousel').carousel(); 
}); 
</script> 

Answer 2

sự hiểu biết của tôi là

<div class="carousel"> 

Cần phải là

<div id="myCarousel" class="carousel"> 

trong đó id là bất kỳ tên "mũi tên" nào.

Answer 3

Lưu ý: câu trả lời này ban đầu được cho Bootstrap 2.3.2 (có thể không làm việc với phiên bản 3)

Bạn phải đặt lớp "mặt hàng" trên tất cả các slide của bạn và lớp "hoạt động" trên slide đầu tiên. Điều này làm việc cho tôi.

<div class="carousel"> 
    <div class="carousel-inner"> 


<!-- your slide --> 

    <div class="hero-unit item active"> 
       <h1>Hello, world!</h1> 
       <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p> 
       <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p> 
    </div> 

    </div> 
</div> 

Và giống như Christopher cho biết bạn cần sử dụng chức năng này để bắt đầu.

<script type="text/javascript"> 
$(function(){ 
    $('.carousel').carousel(); 
}); 
</script> 

Answer 4

Bạn không có mục nào trong mã ví dụ của mình. để làm cho nó hoạt động, bạn cần phải có ít nhất hai mục, với div bên trong băng chuyền của bạn.

1. tạo mục thứ hai
2. đảm bảo mục đầu tiên có lớp đang hoạt động; điều này bắt đầu bóng lăn
3. mã trần phải giống như thế này

.

<div class="carousel-inner"> 
    <div class="active item">…</div> 
    <div class="item">…</div> 
    <div class="item">…</div> 
</div> 

Answer 5

Đây là trong Joomla 3.1.1 với mẫu Protostar dựa trên Bootstrap. Tôi không nhận được băng chuyền để tự động quay vòng. Điều này làm việc cho tôi:

Sử dụng một mô-đun tùy html, thêm mã này: (thay đổi imgscr, alt văn bản và chú thích văn bản để tùy chỉnh)

<div id="myCarousel" class="carousel slide"> 
    <ol class="carousel-indicators" style="list-style: none;"> 
     <li class="active" data-target="#myCarousel" data-slide-to="0"></li> 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
     <li data-target="#myCarousel" data-slide-to="2"></li> 
    </ol> 

    <!-- Carousel items --> 
    <div class="carousel-inner"> 
     <div class="active item"> 
      <img src="images/headers/maple.jpg" alt="imagetext 1" /> 
      <div class="carousel-caption"> 
       <h4>Exampletext 1</h4> 
      </div> 
     </div> 
     <div class="item"> 
      <img src="images/headers/raindrops.jpg" alt="imagetext 2" /> 
      <div class="carousel-caption"> 
       <h4>Exampletext</h4> 
      </div> 
     </div> 
     <div class="item"> 
      <img src="images/headers/windows.jpg" alt="imagetext 3" /> 
      <div class="carousel-caption"> 
       <h4>Exampletext</h4> 
      </div> 
     </div> 
    </div> 

    <!-- Carousel nav --> 
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a> 
</div> 

<!-- Call Carousel --> 
<script type="text/javascript"> 
(function($){$('.carousel').carousel({ interval: 5000, pause:'hover'}); 
})(jQuery); 
</script> 

điều chỉnh này trong index.php của bạn mẫu là để ngăn chặn sự nhầm lẫn giữa các tập lệnh, nó vô hiệu hóa mootools khiến băng chuyền mở và đóng các trang trình bày beween:

// CSUTOM disable mootools-more.js 
unset (JFactory::getDocument()->_scripts['/jomaatcms/media/system/js/mootools-core.js']); 
unset (JFactory::getDocument()->_scripts['/jomaatcms/media/system/js/mootools-more.js']);