Primefaces carousel swipe not working on mobile devices

sgeller89 · 15 Mar 2017, 16:01

I am using JSF and Primefaces 6.0. I have a carousel widget and I am trying to test out the swipe event to make sure it cycles though. When I have Google Chrome in normal desktop mode (non-emulation), the swipe works, but when I try to emulate an iphone or galaxy phone, the swipe does not work. Here is a snippet from my template and page using the carousel widget. I did try upgrading to the release candidate 6.1 with no success. Some embedded js files from JSF/Primefaces are jquery-plugins.js.xhtml, jquery.js.xhtml, touchswipe.js, components.js, and core.js.

Please note that I am not using any explicit Primefaces mobile widgets (no namespace declaration, renderkit, or any other PF mobile code). I manually wrote the site to be mobile responsive (except for the carousels do use the responsive and breakpoint properties).

Template:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui">

<h:head>
<title>#{resourceText['title']}</title>
<ui:insert name="jqueryFiles" />
<h:outputScript library="js" name="mobileNavigation.js" />
<h:outputScript library="js" name="layout.js" />
<meta name="keywords" content="#{resourceText['meta.name.keywords']}" />
<meta name="description" content="#{resourceText['meta.name.description']}" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</h:head>

<h:body>
<f:facet name="last">
<h:outputStylesheet name="css/common.css" />
<h:outputStylesheet name="css/layout.css" />
<ui:insert name="styleSheets" />
</f:facet>

<p:outputPanel id="contentContainer" styleClass="contentContainer">
<ui:insert name="content" />
</p:outputPanel>
</h:body>
</html>

Home Page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui" xmlns:f="http://java.sun.com/jsf/core">
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" template="/templates/layout.xhtml">

<ui:define name="styleSheets">
<h:outputStylesheet library="css" name="home.css" />
</ui:define>

<ui:define name="content">
<h:outputScript library="js" name="home.js" />
<h:outputScript library="js" name="carousel.js" />
<h:form id="mainForm">
<p:outputPanel id="contentPanel" styleClass="contentPanel autoCenter">
<p:outputPanel styleClass="promoPhotoPanel">
</p:outputPanel>
<p:outputPanel styleClass="shopByCollectionPanel">
<p:outputPanel styleClass="shopByCollectionHeaderTextPanel fontFamilyGeorgia">
<h:outputText value="#{resourceText['home.shop.by.collection.label']}" />
</p:outputPanel>
<p:outputPanel id="shopByCollectionProductPanel" styleClass="shopByCollectionProductPanel parentOfFloat marginTop10">
<p:outputPanel styleClass="shopByCollectionLeftArrowPanel">
<p:outputPanel styleClass="shopByCollectionLeftArrow">
<p:commandLink onclick="prevImage('shopByCollectionCarousel');" styleClass="shopByCollectionLeftArrowButton" />
</p:outputPanel>
</p:outputPanel>
<p:outputPanel styleClass="shopByCollectionCarouselPanel">
<p:carousel circular="true" value="#{homeBean.shopByCollectionList}" var="productOption" styleClass="shopByCollectionCarousel" responsive="true" widgetVar="shopByCollectionCarousel" breakpoint="874">
<p:outputPanel id="shopByCollectionProductOuterPanel" styleClass="shopByCollectionProductOuterPanel">
<p:outputPanel styleClass="autoCenter">
<h:graphicImage value="#{productOption.productCoverImageWithTie.productImagePath}" styleClass="shopByCollectionProductImage" />
</p:outputPanel>
<p:outputPanel styleClass="autoCenter">
<h:outputText value="#{productOption.productOption.product.productName.toUpperCase()}" styleClass="fontFamilyGeorgia fontSize13" />
</p:outputPanel>
<h:inputHidden id="shopByCollectionProductOptionPid" value="#{productOption.productOption.productOptionPid}" />
</p:outputPanel>
</p:carousel>
</p:outputPanel>
<p:outputPanel styleClass="shopByCollectionRightArrowPanel">
<p:outputPanel styleClass="shopByCollectionRightArrow">
<p:commandLink onclick="nextImage('shopByCollectionCarousel');" styleClass="shopByCollectionRightArrowButton" />
</p:outputPanel>
</p:outputPanel>
</p:outputPanel>
</p:outputPanel>
</p:outputPanel>
</h:form>
</ui:define>
</ui:composition>
</html>

Primefaces carousel swipe not working on mobile devices

Who is online