Question

我的旋转木马在我的模态顶部有缩略图。我的轮播仅适用于轮播导航控件 因为我在 href中使用 =＆＃34; #myCarousel ＆＃39;。$ rows [＆＃39; id＆＃39;]。＆＃39; ＆＃34; 在主滑块中使用我的 id =＆＃34; myCarousel ＆＃39;。$ rows [＆＃39; id＆＃39;]。＆＃39; ＆＃34; 所以滑块工作正常，但问题是当我点击缩略图我的滑块没有改变。我已经尝试在我的id =＆＃34; carousel-selector-1＆＃34;之后使用＆＃39;。$ rows [＆＃39; id＆＃39;]。＆＃39; 喜欢这个id =＆＃34; carousel-selector-1＆＃39; 。$ rows [＆＃39; id＆＃39;]。＆＃39; ＆＃34;在我的数据 - 幻灯片编号=＆＃34; 数字在这里 ＆＃39;。$ rows [＆＃39; id＆＃39;]。＆＃39; ＆＃34; 它没有用。

在我的java脚本中，我尝试进行更改而不是succsses。

   $('#myCarousel').carousel({
  interval: 4000
   });

  // handles the carousel thumbnails
  $('"[id^='.$rows['id'].']").click( function(){
  var id_selector = $(this).attr("id");
 var id = id_selector.substr(id_selector.length -1);
 id = parseInt(id);
 $('#myCarousel').carousel(id);
 $('[id^=carousel-selector-]').removeClass('selected');
 $(this).addClass('selected');
 });

// when the carousel slides, auto update
$('#myCarousel').on('slid', function (e) {
var id = $('.item.active').data('slide-number');
id = parseInt(id);
$('[id^=carousel-selector-]').removeClass('selected');
$('[id=carousel-selector-'+id+']').addClass('selected');
});

我的旋转木马......

<div class="container">
 <!-- thumb navigation carousel -->
<div class="col-md-12 hidden-sm hidden-xs" id="slider-thumbs'.$rows['id'].'">

        <!-- thumb navigation carousel items -->
      <ul class="list-inline">
      <li> <a id="carousel-selector-0" class="selected">
        <img src="http://placehold.it/80x60&amp;text=one" class="img-responsive">
      </a></li>
      <li> <a id="carousel-selector-1">
        <img src="http://placehold.it/80x60&amp;text=two" class="img-responsive">
      </a></li>
      <li> <a id="carousel-selector-2">
        <img src="http://placehold.it/80x60&amp;text=three" class="img-responsive">
      </a></li>
      <li> <a id="carousel-selector-3">
        <img src="http://placehold.it/80x60&amp;text=four" class="img-responsive">
      </a></li>
            <li> <a id="carousel-selector-4">
        <img src="http://placehold.it/80x60&amp;text=five" class="img-responsive">
      </a></li>
      <li> <a id="carousel-selector-5">
        <img src="http://placehold.it/80x60&amp;text=six" class="img-responsive">
      </a></li>
      <li> <a id="carousel-selector-6">
        <img src="http://placehold.it/80x60&amp;text=seven" class="img-responsive">
      </a></li>
      <li> <a id="carousel-selector-7">
        <img src="http://placehold.it/80x60&amp;text=eight" class="img-responsive">
      </a></li>
       <li> <a id="carousel-selector-7">
        <img src="http://placehold.it/80x60&amp;text=eight" class="img-responsive">
      </a></li>
        </ul>

</div>


<!-- main slider carousel -->
<div class="row">
    <div class="col-md-12" id="slider">

            <div class="col-md-12" id="carousel-bounding-box">
                <div id="myCarousel'.$rows['id'].'" class="carousel slide">
                    <!-- main slider carousel items -->
                    <div class="carousel-inner">
                        <div class="active item" data-slide-number="0">
                            <img src="http://placehold.it/1200x480&amp;text=one" class="img-responsive">
                        </div>
                        <div class="item" data-slide-number="1">
                          <img src="http://placehold.it/1200x480/888/FFF" class="img-responsive">
                        </div>
                        <div class="item" data-slide-number="2">
                            <img src="http://placehold.it/1200x480&amp;text=three" class="img-responsive">
                        </div>
                        <div class="item" data-slide-number="3">
                            <img src="http://placehold.it/1200x480&amp;text=four" class="img-responsive">
                        </div>
                        <div class="item" data-slide-number="4">
                            <img src="http://placehold.it/1200x480&amp;text=five" class="img-responsive">
                        </div>
                        <div class="item" data-slide-number="5">
                            <img src="http://placehold.it/1200x480&amp;text=six" class="img-responsive">
                        </div>
                        <div class="item" data-slide-number="6">
                            <img src="http://placehold.it/1200x480&amp;text=seven" class="img-responsive">
                        </div>
                        <div class="item" data-slide-number="7">
                            <img src="http://placehold.it/1200x480&amp;text=eight" class="img-responsive">
                        </div>
                    </div>
                    <!-- main slider carousel nav controls --> <a class="carousel-control left" href="#myCarousel'.$rows['id'].'" data-slide="prev">‹</a>

                    <a class="carousel-control right" href="#myCarousel'.$rows['id'].'" data-slide="next">›</a>
                </div>
            </div>

    </div>
</div>

什么是狼？

Answer 1

我修好了。我在我的

中使用了我的拇指...

＆LT; li class =＆＃34; col-sm-2＆＃34;的数据目标=＆＃34;＃myCarousel＆＃39; $行[＆＃39; ID＆＃39;]＆＃39;＆＃34; data-slide-to =＆＃34; 1＆＃34; ＆gt;

等等。

Bootstrap carousel动态php

1 个答案: