The jCarousel library supports the addition of what it calls "pagination". These are the little numbers or dots that appear below a carousel to allow a user to jump to a specific page in the carousel.

The jCarousel module does not seem to have support for this (despite a misleading description of what the "navigation" option does).

Let's add it. Patch forthcoming.

CommentFileSizeAuthor
#7 interdiff_5-7.txt2.08 KBRishi Kulshreshtha
#7 jcarousel_add-pagination_2882564-7.patch6.81 KBRishi Kulshreshtha
#7 After.png34.31 KBRishi Kulshreshtha
#6 Before.png34.1 KBRishi Kulshreshtha
#5 jcarousel_add-pagination_2882564-5.patch4 KBskylord
#2 jcarousel_add-pagination_2882564-2.patch4.67 KBazinck
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

azinck created an issue. See original summary.

azinck’s picture

azinck CreditAttribution: azinck commented
Status: Active » Needs review
FileSize
jcarousel_add-pagination_2882564-2.patch4.67 KB

Here's a first stab.

I'm guessing it won't work too well if you're using the jcarousel views pager plugin or ajax. I don't really know much about those use-cases, but I doubt getting this functionality to work with ajax is an easily solvable problem within the jCarousel framework.

niko-’s picture

niko- CreditAttribution: niko- as a volunteer commented

Hi @azinck

Sorry for delay with unswer

I think that adding support of "pagination" is great idea
Only one thing is blocker to apply this patch in module.

+++ b/assets/vendor/jcarousel/jcarousel.js
@@ -87,6 +87,22 @@
+                return '<a href="#' + page + '">' + page + '</a>';

We should prevent adding html in js and use twig templates instead

niko-’s picture

niko- CreditAttribution: niko- as a volunteer commented
Status: Needs review » Needs work
skylord’s picture

skylord CreditAttribution: skylord commented
Version: 8.x-4.0 » 6.0.0-alpha1
Status: Needs work » Needs review
FileSize
jcarousel_add-pagination_2882564-5.patch4 KB

Reroll for version 6 and remove adding html in js as plugin defaults are working well.

Rishi Kulshreshtha’s picture

Rishi Kulshreshtha
he/him/his
Primary language English
CreditAttribution: Rishi Kulshreshtha as a volunteer and at Redfin Solutions, LLC commented
Version: 6.0.0-alpha1 » 6.0.x-dev
Assigned: Unassigned » Rishi Kulshreshtha
Status: Needs review » Needs work
FileSize
Before.png34.1 KB

Thanks @skylord; the rerolled patch looks good, but the pagination numbers are vanilla. IMHO we can have a similar approach of using skins here to fix this.

Rishi Kulshreshtha’s picture

Rishi Kulshreshtha
he/him/his
Primary language English
CreditAttribution: Rishi Kulshreshtha as a volunteer and at Redfin Solutions, LLC commented
Assigned: Rishi Kulshreshtha » Unassigned
Status: Needs work » Needs review
FileSize
After.png34.31 KB
jcarousel_add-pagination_2882564-7.patch6.81 KB
interdiff_5-7.txt2.08 KB

Added pagination styling.

firstlut’s picture

firstlut CreditAttribution: firstlut commented

Thanks for doing this! It works a charm. I did have to add a "display: flex" to the <p> that contains the pagination dots, as they were stacking up. I've also set up a view with 4 images across, and it's treating every 4 images as one page, instead of creating a dot for each image.

If I knew more JS, I'd figure it out myself, but I'm the worst!