How to set slider pagination number for each slide?

Design help Custom code
1

Hi there!

I have developed a project in which I have to add pagination number in a slider for each slide, you can see in the reference image:

image
image921×617 90.2 KB

Now, I have developed one of them like as you can in my shared link(Temp) but I need pagination for each slide just like in the design now I don’t understand how I make this, I have developed it but it’s actually for one slide now I need three as per the reference, can anyone help me please?

Here is my Read Only Link:
https://preview.webflow.com/preview/fig-2-flow?utm_medium=preview_link&utm_source=dashboard&utm_content=fig-2-flow&preview=0448feb92c5eca3132ad0ecb6b814786&workflow=preview

2

Hi @moiz_striker, Assuming there will be an equal number of Pagination element & Slider elements:

$('.slider-pagination-inner').each(function(index){
  var i = index;
  var t = $('.slider-pagination-inner').length
  $(this).find('.slider-pagination-number').text(index + 1)
  $(this).find('.slider-total').text(t)
});

I have a concern about the structure though, the fact that the pagination & slider has separate parents. Though if its not causing any issue, you can ignore it.

3

Hi @dennyhartanto, actually your code is running but it is not updating the numbers when I click on right arrow it stuck as you can see in pic

image
image1595×829 157 KB

Actually I wanna update the numbers when the user will click on the arrow then the pagination numbers will update and the the total number of slides are 06 but it shows only 04 I actually don’t understand that how I make this one I’m stuck literally

4

Hi @dennyhartanto, are you there? can you help me?

5

Hey @moiz_striker, what plug in or library are you using for the slider? i think the way its setup is whats causing the code i provided not to work.

Screenshot 2023-01-05 at 21.12.08
Screenshot 2023-01-05 at 21.12.081197×844 145 KB

6

@dennyhartanto, I use this code and embed in body:

image
image1595×825 196 KB

and you can see this code in my read only link

7

@moiz_striker got it, I think the main issue here is that your pagination live outside the slides. Without going into more custom code, I think the solution here is to include the pagination into the slide itself.

8

yeah I got your point @dennyhartanto, but the thing is if I will do this then when we change the slide then the pagination which will inside the slide it will also drag like will also slide but in the design I have to make that like when the user changes the slide like when the user will click on the arrow then the pagination will change