부트 스트랩 표시기에 표시기가 표시되지 않고 작동하지 않습니다.

Question

부트 스트랩 캐로 셀 (* 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와도 그 잘 작동하지 않는 것 같습니다 ..하지만 슬라이드가 작동하고, 이전/다음 않습니다 너무 나는 그것을 추가 ..

Answer 1

:

내 코드입니다 정말 JSFiddle을 추가하고 싶지만 기본 bootstrap.js 및 스타일 시트보다 더 많은 내용이 없습니다. 다운로드 한 부트 스트랩 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'); 
      }); 

      });