I am trying to show a group of items that are coming back as results to the user within a paginated carousel slider. A max 200 results are called in the DOM, with 9 needing to be shown per slide. Catch is the text underneath isn’t a traditional [ 1, 2 ,3 ] pagination but states what results are showing, which needs to update as the slides are switched by the user within the carousel. Such as:
Slide 1: ‘Showing results 1-9 of 200’ Slide 2: ‘Showing results 10-18 of 200’
Rough visual example included below:
I know there are loads of jquery plugins for carousels and I’m fine to use one, but I can’t any info about making one do the above; only showing what slide number the user is on. And it’s very hard to google without just getting results relating to traditional pagination.
Can anyone please point me in the right direction of a 3rd party plugin that will offer this functionality or a way it can be achieved? Thanks!
<!-- loop results up to 200 -->
<% @groups[bookings][1..200].each do |item| %>
<div class="result-card">
<div class="name"><%= item.name %></div>
<div class="location"><%= item.location %></div>
</div>
<% end %>
<!-- end loop -->