Có thể có nhiều băng chuyền Twitter Bootstrap trên một trang không?

Twitter Bootstrap Version: 2.0.3Có thể có nhiều băng chuyền Twitter Bootstrap trên một trang không?

Ví dụ HTML code:

<!DOCTYPE html> 
<html dir="ltr" lang="en-US" xmlns:og="http://opengraphprotocol.org/schema/"> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="reddlec/style.css" /> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('.carousel').each(function(){ 
     $(this).carousel({ 
      pause: true, 
      interval: false 
     }); 
    }); 
}); 
</script> 
<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script> 
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script> 
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-carousel.js"></script> 
</head> 
<body> 
<div id="carousel-1" class="carousel slide"> 
    <!-- Carousel items --> 
    <div class="carousel-inner"> 
    <div class="active item">…</div> 
    <div class="item">…</div> 
    <div class="item">…</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> 

<div id="carousel-2" class="carousel slide"> 
    <!-- Carousel items --> 
    <div class="carousel-inner"> 
    <div class="active item">…</div> 
    <div class="item">…</div> 
    <div class="item">…</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> 
</body> 
</html>

Ví dụ CSS:bootstrap.css

Vấn đề: Đối với hai băng tải bootstrap để làm việc trên một về cơ bản, tôi cần đặt hai ID khác nhau cho các bộ chứa div của họ (#carousel-1 và #carousel-2). Nhưng tôi đã nhận thấy rằng băng chuyền không hoạt động trừ khi tôi sử dụng #myCarousel làm ID của vùng chứa div.

Trong trường hợp đó, làm cách nào tôi có thể có nhiều băng chuyền trên một trang?

Nguồn

2012-05-09 its_me

Thay đổi href trong liên kết điều hướng băng chuyền của bạn để khớp với giá trị id của băng chuyền bạn đang kiểm soát. Giá trị href đó là cách bootstrap xác định cái nào để trượt. Vì vậy, bạn sẽ cần phải thay đổi như sau:

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

Và đối với các băng chuyền thứ hai:

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

Nguồn

2012-05-09 18:16:31 dgabriel

Bạn có thể có nhiều băng chuyền chạy trong một trang, tất cả những gì bạn phải làm là gọi chúng một cách thích hợp. Ví dụ, lấy ví dụ này tôi đã viết trên một câu hỏi tôi đăng:

http://jsfiddle.net/andresilich/S2rnm/

tôi có ba băng tải chạy cùng một lúc, mỗi ID duy nhất của riêng mình. Họ được gọi bằng một selector thuộc tính như sau:

$('[id^="myCarousel"]').carousel();

Vì vậy, mỗi băng chuyền có một id bắt đầu chính xác với ID của #myCarousel và sau đó một số để thiết lập phân biệt chúng.

Nhưng bạn cũng có thể định nghĩa một ví dụ cho mỗi băng chuyền trên cùng một dòng, ví dụ: (. Chú ý mỗi selector được phân cách bằng dấu phẩy)

$('#myCarousel1, #myCarousel2, #differentCarousel3').carousel();

Và nó sẽ làm việc là tốt, vì vậy chỉ cần đảm bảo bạn sử dụng bộ chọn hợp lệ cho từng trường hợp băng chuyền của bạn.

Nguồn

2012-05-09 18:16:15

mẹo tuyệt vời để sử dụng nhiều ID. –

là nó có thể làm cho chúng hiển thị trong một mạng lưới? thay vì chồng lên nhau? – caffeinescript

Giải pháp tuyệt vời, đã làm việc cho tôi. – Pupil

Có thể có nhiều băng chuyền Twitter Bootstrap trên một trang không?

Trả lời

Các vấn đề liên quan