Primefaces 轮播 next() 和 prev() 方法在 5.3 和 6.0 版本中不起作用答案

【问题标题】：Primefaces carousel next() and prev() methods are not working in version 5.3 and 6.0Primefaces 轮播 next() 和 prev() 方法在 5.3 和 6.0 版本中不起作用
【发布时间】：2016-06-15 13:58:20
【问题描述】：

我将 Primefaces 5.2 与 JSF 2.2 一起使用。在升级到 primefaces 的新版本 5.3（或 6.0）之前，使用 primefaces 轮播 next() 和 prev() 导航方法没有问题。有没有办法解决这个问题。

【问题讨论】：

轮播导航方式有哪些？你如何使用它？而且“不工作”不够详细。调查更多，使用浏览器开发工具等...
下次请阅读How to Ask、stackoverflow.com/tags/jsf/info 和minimal reproducible example 以了解什么不起作用。并且可以指定“不起作用”...例如“使用 PF('myWidgetVar').next(); 时出现'不是函数错误”

标签： jsf primefaces carousel

【解决方案1】：

我也有这个问题。我找到的解决方案是使用 setPage 。例如：

 function CarouselNext()
      {
        var currentPage = PF('wcarouselDistro').page;
        var totalPages = PF('wcarouselDistro').totalPages - 1;
        var c = (currentPage === (totalPages));
        if (!c)
        {
          PF('wcarouselDistro').setPage(currentPage + 1);
        }
      }

   function CarouselPrev()
      {
        var currentPage = PF('wcarouselDistro').page;
        if (currentPage !== 0)
        {
          PF('wcarouselDistro').setPage(currentPage - 1)
        }
      }

我的组件。

<p:graphicImage id="s1" library="images" name="prev-icon.png"  
                            style="display: inline-block; cursor: pointer;" onclick="CarouselPrev();" />

 <p:graphicImage id="s7" library="images/ulcs" name="next-icon.png" style="display: inline-block; cursor: pointer;" onclick="CarouselNext();" />

希望能帮到你！

【讨论】：

为什么需要这个？ PF('wcarouselDistro').next() 和 PF('wcarouselDistro').prev() 实际上在 PrimeFaces 5.3 6.0 中不起作用吗？如果是这样，请提交问题以修复它...没有：github.com/primefaces/primefaces/…
感谢您的回答。这对我有帮助，就足够了。
@Kukeltje 在我的测试中，我无法使用“next ();”我正在使用 Primefaces 6，会是一个错误吗？
@Kadir 请告知它是否适用于您的应用程序？如果是这样，检查答案作为他们问题的解决方案。谢谢

【解决方案2】：

这不是错误。 Carousel 在 PF 5.3 (http://blog.primefaces.org/?p=3569) 中进行了重新设计，并且重新设计和/或删除了方法。

如果您在第 205 行检查 PF 5.2 标记 (https://github.com/primefaces/primefaces/blob/5_2/src/main/resources/META-INF/resources/primefaces/carousel/carousel.js) 中的轮播源代码，则存在 next() 和 prev() 方法。

但是 next() 和 prev() 方法已从源代码中删除。您可以在 PF 6.0 源代码中查看它：github.com/primefaces/primefaces/blob/master/src/main/resources/META-INF/resources/primefaces/carousel/carousel.js。

对于导航，您可以像 Phelipe Galiotti 的回答一样使用 setPage()。

我使用 PF6.0 startAutoplay() 方法中的代码为循环轮播实现 next 和 prev 方法。

function prevImage (PFCarousel) {
  if(PFCarousel.page === 0)
	PFCarousel.setPage(PFCarousel.totalPages - 1);
  else
    PFCarousel.setPage(PFCarousel.page - 1);
}
		
function nextImage (PFCarousel) {
  if(PFCarousel.page === (PFCarousel.totalPages - 1))
    PFCarousel.setPage(0);
  else
    PFCarousel.setPage(PFCarousel.page + 1);
}

【讨论】：