当我为来自服务器的数据实现了更多的angular js代码时,Carousel停止了工作

Carousel stopped working when i implemented some more angular js code for the data coming from the server

本文关键字:代码 js 工作 Carousel angular 服务器 实现 数据      更新时间:2023-09-26

早些时候,我已经实现了carousel(silder),它工作得很好。

我之前的代码:

  <div class="wrapper">
    <div class="jcarousel-wrapper" style="margin:5px auto;">
                 <div class="jcarousel ">
                    <ul class="row" style="border-bottom: 1px solid #f68200;padding-bottom: 0px;">
                       <li>
                          <div class="span3">
                             <a href="#"><img src="./images/homeSlider01.jpg" style="width: 225px;height: 220px;"/></a>
                             <p ng-repeat="label in carouselOfLocationLabels | filter:'Location6'" class="home-slider1" style="text-align:left;"> {{label.text}}</p>
                          </div>
                       </li>
                       .......
                       .......                  
                    </ul>
                 </div>
                 <a href="#" class="jcarousel-control-prev">prev</a>
                 <a href="#" class="jcarousel-control-next">next</a>
              </div>
           </div>
         </div>
然后我修改了几行,以便从服务器响应中获取图像。就是这样。这里的

,当前代码是:

    <div class="wrapper">
           <div class="jcarousel-wrapper" style="margin:5px auto;">
                 <div class="jcarousel ">
                 <input type="hidden" id="slider1length" value="{{featuredListSlider1Length}}"/>
                    <ul class="row" style="border-bottom: 1px solid #f68200;padding-bottom: 0px;">
                       <li class="featuredListSlider1" ng-repeat="label in featuredListSlider1">
                          <div  class="span3">
                             <div id="featuredListSlider1{{$index}}" style="margin: -3.5%;">{{label.url}}</div>
                             <p class="home-slider1" style="text-align:left;"> {{label.title}}{{label.price}}</p>
                          </div>
                       </li>
                    </ul>
                 </div>
                 <a href="#" class="jcarousel-control-prev">prev</a>
                 <a href="#" class="jcarousel-control-next">next</a>
              </div>
           </div>
        </div>

与服务器响应的图像格式相同,但它停止滑动。

在控制台中,我发现只有一个错误:(当我点击上一个或下一个控件)

 "Uncaught TypeError: Cannot read property 'index' of null "

不知道为什么它不工作了。

根据jCarousel (https://github.com/jsor/jcarousel/blob/master/dist/jquery.jcarousel.js)的代码,我的猜测是它检测到<div class="jcarousel ">中的<input>元素,并将其视为不包含列表。有可能把它移出旋转木马分区吗?

<div class="wrapper">
       <div class="jcarousel-wrapper" style="margin:5px auto;">
             <input type="hidden" id="slider1length" value="{{featuredListSlider1Length}}"/>
             <div class="jcarousel ">
                <ul class="row" style="border-bottom: 1px solid #f68200;padding-bottom: 0px;">
                   <li class="featuredListSlider1" ng-repeat="label in featuredListSlider1">
                      <div  class="span3">
                         <div id="featuredListSlider1{{$index}}" style="margin: -3.5%;">{{label.url}}</div>
                         <p class="home-slider1" style="text-align:left;"> {{label.title}}{{label.price}}</p>
                      </div>
                   </li>
                </ul>
             </div>
             <a href="#" class="jcarousel-control-prev">prev</a>
             <a href="#" class="jcarousel-control-next">next</a>
          </div>
       </div>
    </div>