jCarousel每页更多滑块

时间:2014-05-25 00:38:08

标签: jcarousel

我将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/不要说滑块的倍增。如果你能提供帮助,我可以发帖子。

1 个答案:

答案 0 :(得分:0)

为什么您为多个标签添加了相同的ID值?删除重复的id,id值在整个文档中应该是唯一的。