当我为来自服务器的数据实现了更多的angular js代码时,Carousel停止了工作
Carousel stopped working when i implemented some more angular js code for the data coming from the server
早些时候,我已经实现了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>
相关文章:
- Meteor JS中代码的重复使用部分
- 骨干模型默认值-todos.js示例中不必要的代码
- 为什么indexOf在这个js代码中不起作用
- 点击facebook像素跟踪注册(JS/JQUERY代码)
- js代码从jQuery转换为原生代码
- JS代码中的减号
- 将JS函数传递给Emscripten生成的代码
- 谷歌地图Api和JS代码不工作
- HTML 5 和 3.js 代码不会在网页上显示任何内容
- Node.js:异步代码 + js 闭包的问题
- Chrome 开发者工具 - 控制台.log原生代码 JS
- 为jQuery和KNOCKOUT通用化javascript代码.js成为一个可重用的模块
- .ninnerHtml代码(JS/JQuery)无法识别html表中的动态内容
- 生成唯一的6位代码js
- 我得到了“;赋值中的左侧无效“;在我的代码(JS)中
- 更改代码(JS)中JQuery Mobile Calendar日期的状态
- 如何改进代码JS(Jquery)?一个简单的下拉列表
- 从传输中了解代码.js
- 这段代码(JS)的区别是什么?
- JavaScript倒计时计时器代码[JS]