Change carousel pagination buttons style to be page numbers

Question

I am using Primefaces carousel component and I was wondering if it's possible to change the carousel pagination buttons style to be page numbers?

Thanks

Answer 1

What you could do is create a custom renderer (see for example How to sort f:selectItems in each p:selectOneMenu of my application?), and @Override this method:

protected void encodePageLinks(FacesContext context, Carousel carousel, int pageCount) throws IOException {
    ResponseWriter writer = context.getResponseWriter();

    writer.startElement("div", null);
    writer.writeAttribute("class", Carousel.PAGE_LINKS_CONTAINER_CLASS, null);

    for (int i = 0; i < pageCount; i++) {
        writer.startElement("a", null);
        writer.writeAttribute("href", "#", null);
        writer.writeAttribute("class", Carousel.PAGE_LINK_CLASS, null);
        writer.endElement("a");
    }

    writer.endElement("div");
}

Add the page number to the outputted links. A part of the style classes of the page links are controlled by the component JavaScript. You could override that as well, but it would be easier to add some custom styling to get rid of the radio button look.

See also:

• How do I override default PrimeFaces CSS with custom styles?

Be careful though, as custom renderers make it harder to upgrade. As per this comment on the GitHub ticket you opened, this method may look different in PF 11, or even be gone.