How to create Pagination?

Design help General
1

Hi there,
I’m currently trying to recreate the slider from this image;

image
image1506×944 143 KB
but I don’t understand what I am looking at in this code. I was wondering if anyone could help me to work out how it is done?

I have included a link to the site here; https://www.notion.so/blog/page/6.

Best,
Luke

2

hi @Luke_Williams this is not a Slider but it is called Pagination and you will need custom JS (javaScript) to create one.

If you do not know how to code you can always check “made in Webflow” and use keyword to filter results to find example where is pagination applied to study how it is done in WF.

1 Like
3

If you’re trying to rebuild what you’re seeing as a slider with item numbers look at swiper.js.

However as Stan indicated it’s not the same thing. In your screenshot, “6” appears to represent the current page which shows two items. In most slider configurations, each item is individual, so each item would have its own nav dot or number.

Check swiper’s docs, they’re extensive, and page numbering might be a feature.

1 Like
4

The screenshot is cut off, when you check referenced website you will see there is on each page 10 items (article links). I believe that image was only demonstrating pagination.

1 Like
5

Thank you @Stan, this is the kind of thing I was looking for.

1 Like