Pro 5.1 Beta - Slider Pagination Feature request

Please Please Please (with a cherry on top), can we have the ability to choose a graphic or icon for slider pagination

2021-10-13_10-20-34

9 Likes

+1 on at least this. :slight_smile:

I have assumed that pagination was a buildable element that could accept anything, including small dynamic image gallery thumbnails.

2 Likes

This would be great!

1 Like

All of the yes

1 Like

Image gallery thumbnails in pagination would be a nice additional option indeed.

2 Likes

Thanks for the feedback here everyone!

The Slide Pagination is a special element in that it will adapt based on the “Slides Per Page” settings which can be changed at different breakpoints. This means we can’t make it allow builder elements inside. We’re not ruling this out, but we’re hesitant to add any more options to the Slide Pagination element. A graphic wouldn’t be directly compatible with how the indicators are already setup so we’d somewhat have to fork the element and offer a new path of options. At the moment, we’re opting to leave this element as it stands in that regard.

However, to accommodate more use cases, we’re going to add something similar to how the Next/Prev buttons work and let you use existing elements that advance directly to specific slide indexes rather than advance forward/back.

The following will be possible in the next patch:

  • Add one Element (Div, Button, etc.) for each pagination item you need (or just use a looper)
  • On your Element add a custom attribute of data-x-slide-navigate with a numeric value.
  • Clicking the element will cause the slider to navigate directly to the slide index from that number
  • When the presented Slide’s index matches your pagination Element’s number, the element will honor the Scroll Effects Enter/Exit state. This will propagate to children elements. It is useful to add opacity/filters when the button should be inactive.

This will let you do many creative forms of navigation. Some ideas:

  • Something like the the slider on our testimonials page (https://theme.co/testimonials) would be possible
  • Using the hidden Looper Rewind option (Dev Toolkit), you could iterate over data twice, and use it in both the slides and pagination items. @Misho, @urchindesign this could be used to create a Slider that shows several images, but also uses them as the navigation thumbnails.
  • Using a Stacked Slider and disabling the fade transition you could create a faux custom tabbed area.

Aside from it being a bit more to setup than the Slide Pagination element, the main disadvantage is that it won’t adapt along with the “Slides Per Page” option of the Inline mode.

3 Likes

Ok, I get the multi page view, but that wouldn’t be an issue with being able to pick the same icon/graphic for all slides. I’m trying to get away from the standard little circle/square to something that has more interest and possibly brand

Restaurant with food/drink icons (or even text) would be one interesting use case, too.

The stuff for data-x-navigate is all set for the next beta. Sorry everyone, anything more customized will need to be done with builder elements using that attribute. We’re not planning on changing how Slide Pagination works or adding anything else right now.

Is data-x-navigate workable in build 5.14? :thinking:

@MathiasD, We ended up calling it x-slide-goto. Notes can be found here: https://theme.co/docs/sliders#custom-attributes