我将jCarousel用于我的项目。我需要三页或更多页面上的滑块。但是当页面上只有一个滑块时它可以正常工作。我用JS脚本尝试了一些魔法,但它没有帮助。
查看我的滑块代码:
<h3>My Queue</h3>
<div id="myque" class="jcarousel-wrapper">
<div id="myque" class="jcarousel" data-jcarousel="true">
<ul id="myque" style="left: -100px; top: 0px;">
<li><img src="slides/img1.jpg" alt="Image 1"><h4><a href="#">Titlu nr.1</a></h4></li>
<li><img src="slides/img2.jpg" alt="Image 2"><h4><a href="#">Titlu numarul 1</a></h4></li>
<li><img src="slides/img3.jpg" alt="Image 3"><h4><a href="#">Numărul trei</a></h4></li>
<li><img src="slides/img4.jpg" alt="Image 4"><h4><a href="#">Încercarea patru</a></h4></li>
<li><img src="slides/img5.jpg" alt="Image 5"><h4><a href="#">5</a></h4></li>
<li><img src="slides/img6.jpg" alt="Image 6"><h4><a href="#">Șase</a></h4></li>
</ul>
</div>
<a id="myque" href="#" class="jcarousel-control-prev" data-jcarouselcontrol="true">
<i class="glyphicon glyphicon-chevron-left"></i>
</a>
<a id="myque" href="#" class="jcarousel-control-next" data-jcarouselcontrol="true">
<i class="glyphicon glyphicon-chevron-right"></i>
</a>
</div>
<h3>Feature topic: <b>Labor Day</b></h3>
<div id="feature" class="jcarousel-wrapper">
<div id="feature" class="jcarousel" data-jcarousel="true">
<ul id="feature" style="left: -100px; top: 0px;">
<li><img src="slides/img1.jpg" alt="Image 1"><h4><a href="#">Titlu nr.1</a></h4></li>
<li><img src="slides/img2.jpg" alt="Image 2"><h4><a href="#">Titlu numarul 1</a></h4></li>
<li><img src="slides/img3.jpg" alt="Image 3"><h4><a href="#">Numărul trei</a></h4></li>
<li><img src="slides/img4.jpg" alt="Image 4"><h4><a href="#">Încercarea patru</a></h4></li>
<li><img src="slides/img5.jpg" alt="Image 5"><h4><a href="#">5</a></h4></li>
<li><img src="slides/img6.jpg" alt="Image 6"><h4><a href="#">Șase</a></h4></li>
</ul>
</div>
<a id="feature" href="#" class="jcarousel-control-prev" data-jcarouselcontrol="true">
<i class="glyphicon glyphicon-chevron-left"></i>
</a>
<a id="feature" href="#" class="jcarousel-control-next" data-jcarouselcontrol="true">
<i class="glyphicon glyphicon-chevron-right"></i>
</a>
</div>
</div>
我在每个div添加了id,#feature和#myque。然后我尝试了这个JS代码:
<script type="text/javascript">
$(document).ready(function() {
$('#feature').jcarousel();
$('#myque').jcarousel();
});
</script>
但它没有帮助。当他们在一起时,没有一个滑块不起作用。
官方网站: http://sorgalla.com/jcarousel/examples/不要说滑块的倍增。如果你能提供帮助,我可以发帖子。
答案 0 :(得分:0)
为什么您为多个标签添加了相同的ID值?删除重复的id,id值在整个文档中应该是唯一的。