Primefaces和圆形旋转木马

时间:2012-05-03 13:32:08

标签: primefaces jsf-2 carousel

我正在使用Primefaces 3.2和Tomcat 7.0.23以及JSF 2.0 我正在使用该组件。

 <p:carousel id="aCarousel" value="#{BBCarousel.carouselItems}" var="carouselItem"  
              autoPlayInterval="3000"
              rows="4" vertical="true" circular="true" pageLinks="0" headerText="Informations"  >      

    <div class="thumbnail">
      <img src="images/minilogo.png" />
    </div>
    <div class="info">
      <a href="#">#{carouselItem.item_title}</a>
      <span class="cat">Category: #{carouselItem.item_cat}</span>
    </div>
  </p:carousel> 

当旋转木马到达最后一个旋转木马项目时,旋转木马滑动到(向上移动)第一个元素..相反,我希望最后一个项目以“圆形方式”附加到第一个项目,没有休息..所以我得到一个连续的滚动效果.. 我希望我一直很清楚.. 谢谢!

1 个答案:

答案 0 :(得分:1)

看看Firebug我发现旋转木马主要是div和隐藏输入,它们具有坐标值。

<div id="slideShow" class="ui-carousel ui-widget ui-widget-content ui-corner-all" style="width: 404px;">
<div class="ui-carousel-header ui-widget-header ui-corner-all">
<div class="ui-carousel-viewport" style="width: 404px; height: 253px;">
<ul style="left: -808px;">
<li class="ui-carousel-item ui-widget-content ui-corner-all photo">
<img id="slideShow:j_idt15" alt="" src="/showcase/images/nature1.jpg;jsessionid=A181FD9A4E1990E40E09B3743EB2EE61">
</li>
<li class="ui-carousel-item ui-widget-content ui-corner-all photo">
<li class="ui-carousel-item ui-widget-content ui-corner-all photo">
<li class="ui-carousel-item ui-widget-content ui-corner-all photo">
</ul>
</div>
<input id="slideShow_first" type="hidden" value="2" name="slideShow_first">
</div>

这些值在autoPlayInterval处发生变化,看起来正在调用jQuery脚本来移动图像并执行效果。

我在Primefaces文档中没有看到任何暗示可以更改不需要的自动播放效果的内容。如果不修改Primefaces代码,我认为这是不可能的。