Bootstrap轮播导航无法正常工作

Question

前一段时间我正在研究bootstrap carousel，它代表了分别基于办公室和房屋的属性缩略图。

整个功能正常，但轮播导航无效。

以下是HTML代码

=EDATE(A2,LEFT(G3,2))

这是我的旋转木马JS

<div class="container-fluid">
<div class="row-fluid">
<div class="span12" id="work_hider">

    <div class="page-header">
        <h2 class="pull-left"><?php if($this->lang->line('work') != '') { echo stripslashes($this->lang->line('work')); } else echo "Work"; ?></h2>
        <h3 class="pull-right" id="geolocate_work"></h3>
        <script>
            $.getJSON("https://freegeoip.net/json/", function(data) {
              var country = data.country_name;
              var city = data.city;

              $("#geolocate_work").html("<a href='property?city="+city+"'><?php if($this->lang->line('see_all') != '') { echo stripslashes($this->lang->line('see_all')); } else echo "See All"; ?></a>");

  jQuery.ajax({
               type:'POST',
               url:'<?php echo base_url("site/landing/get_work_places"); ?>',
               data:{ city_name:city},
               dataType: 'json', 

               success:function(data)
               {
                       var ParsedObject = JSON.stringify(data);  

                         var json = $.parseJSON(ParsedObject);

                   if (json=="")
                   {
                      $('#work_hider').hide();


                   }else
                   {


                       $.each(json, function(key, data) 
                         {
                           // All the variables from the database containing the post data.
                              var product_id=data.product_id;
                              var product_name=data.product_title;
                               var product_image=data.product_image;
                               var work_price = data.price_perhour;
                               var work_address = data.address;


                             $("#work-carousel").append('<li class="span3"><div class="thumbnail"><a href="<?php echo base_url('rental'); ?>/'+product_id+'"><img src="'+product_image+'" alt=""></a></div><div class="caption"><h2>'+work_price+'</h2></div><div class="caption"><h4>'+product_name+'</h4>  <p>'+work_address+'</p></div></li>');



                          });

                        for (i = 0; i <= 1; i++) {
                        $('.span3').slice(i * 4, (i + 1) * 4).wrapAll('<div class="item"><ul id="work_property">');

                      }


                  }
               }
              });


            });



        </script>

    </div>

    <div class="work_carousel slide" id="myCarousel">
        <div class="carousel-inner" id="work-carousel">
            <div class="item active" style="height: 100% !important;">
                    <ul class="thumbnails" id="work_property">


                    </ul>
              </div>


        </div>

        <div class="control-box" style="margin-bottom: 2em;">                            
            <a data-slide="prev" href="#myCarousel" class="carousel-control left">‹</a>
            <a data-slide="next" href="#myCarousel" class="carousel-control right">›</a>
        </div>

    </div>

</div>      
</div>
</div>

我已经搜索过很多但我无法修复它。有人对我有建议吗？提前谢谢！