Bir sayfada birden fazla Twitter Bootstrap karuseli olması mümkün mü?

Heyecan Bootstrap Versiyon: 2.0.3Bir sayfada birden fazla Twitter Bootstrap karuseli olması mümkün mü?

örnek HTML kodu:

<!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>

Örnek CSS:bootstrap.css

Sorun: iki için önyükleme karuseller bir çalışmaya sayfa, temel olarak, div konteynerleri için iki farklı ID ayarlamanız gerekiyor (#carousel-1 ve #carousel-2). Ancak, #myCarousel'u div kabının kimliği olarak kullanmadıkça, döner karterlerin çalışmadığını fark ettim.

Bu durumda, tek bir sayfada birden çok karuseli nasıl alabilirim? Tek bir sayfada birden fazla karuseli çalıştırabilirsiniz, tek yapmanız gereken bunları uygun şekilde aramaktır.

kaynak

2012-05-09 its_me

Rozetinizin navlun bağlantılarındaki href'i, denetlemekte olduğunuz karuselin kimlik değeriyle eşleşecek şekilde değiştirin. Bu href değeri, bootstrap'in hangi slaytta kalacağını belirlemesidir. Yani şu değiştirmeniz gerekecektir:

<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>

Ve ikinci atlıkarınca için: Birden kimlikleri kullanarak için

<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>

kaynak

2012-05-09 18:16:31 dgabriel

Örneğin, ben yayınlanmıştır başka soru üzerine yazdığı bu örneği inceleyelim:

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

ben aynı anda çalışan üç bantları, kendilerine özgü kimliğiyle her vardır. Onlar şöyle bir özellik seçici kullanılarak çağrılan ediyoruz:

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

Yani her atlıkarınca #myCarousel kimliği ve daha sonra onları ayrı ayarlamak için bir sayı ile tam olarak başlar kimliğine sahipse.

Ama aynı zamanda, örneğin aynı hat üzerindeki her atlıkarınca, bir örneğini tanımlayabilirsiniz: (. Her selektör virgülle ayrılmış nasıl dikkat edin)

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

Ve de, bu yüzden sadece çalışacaktır Karuselelerinizin her bir örneği için geçerli bir seçici kullandığınızdan emin olun.

kaynak

2012-05-09 18:16:15

büyük uç. –

, bunların bir ızgarada görüntülenmesi mümkün mü? birbirinin üstüne yığılmak yerine? – caffeinescript

Mükemmel çözüm, benim için çalıştı. – Pupil

Bir sayfada birden fazla Twitter Bootstrap karuseli olması mümkün mü?

cevap

İlgili konular