[英]Bootstrap Carousel not displaying indicators and list not working
我正在使用引導傳送帶(* bootstrap-carousel.js v2.2.2)。 問題是,包含輪播指示符的'ol'樣式不起作用。 當我將樣式手動添加到css文件中時,它正在顯示,但是.active類在幻燈片之間變化時,它似乎並沒有改變。
我的代碼是:
<div id="HomeCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li id="homecar1" data-target="#HomeCarousel" data-slide-to="0" class="active"></li>
<li id="homecar2" data-target="#HomeCarousel" data-slide-to="1"></li>
<li id="homecar3" data-target="#HomeCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item"><img src="<?php bloginfo('template_url'); ?>/images/home/home_carousel1.jpg" height="506px" /> </div>
<div class="item"><img src="<?php bloginfo('template_url'); ?>/images/home/home_carousel2.jpg" /></div>
<div class="item"><img src="<?php bloginfo('template_url'); ?>/images/home/home_carousel3.jpg" /></div>
</div>
</div>
因此,看來jquery也不能很好地工作..但是幻燈片可以工作,而當我添加它時prev / next也可以。
我真的很想添加一些JSFiddle,但是除了默認的bootstrap.js和樣式表之外,還沒有其他內容。我從下載的bootstrap css 2.3文件中添加了指標樣式,並使用ID設置了活動指標。 我手動添加了以下js:
jQuery(document).ready(function($) {
$( "#HomeCarousel li#ind-homecar0" ).click(function() {
$( '#HomeCarousel' ).carousel(0);
});
$( "#HomeCarousel li#ind-homecar1" ).click(function() {
$( '#HomeCarousel' ).carousel(1);
});
$( "#HomeCarousel li#ind-homecar2" ).click(function() {
$( '#HomeCarousel' ).carousel(2);
});
$('#HomeCarousel.carousel').on('slid', function() {
var to_slide = $('#HomeCarousel .carousel-inner .item.active').attr('id');
$('#HomeCarousel .carousel-indicators').children().removeClass('active');
$('#HomeCarousel .carousel-indicators [id=ind-' + to_slide + ']').addClass('active');
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.