How can i do pagination in webflow?

For example something like this:


Here is my public share link: LINK
(how to access public share link)

Hey @Bim,

maybe this will help. Its not that perfect and I m not sure about bugs or any other problem that may occure but hey…just a thought :).

I created a Tab and changed the vertical alignment (just drag and drop the Tab Menu to the bottom), so you ll have the arrangement of a “so to speak paging”.

Then place everything within a div container that is set to relative.
Add two cta’s that will be the back and forth options and give them an #ID.

Every Tab Pane and Tab itself will need a class (like .tabpane and .tab).

Then i added custom code to cycle through the items and give them the active class separately.

This are quite rough explainations, I ll give some more insight and detailed instructions when needed.

Customcode:

<script>
$('#ctanext').click(function(){
    var $next = $('.tablink.w--current').removeClass('w--current').next('.tablink')
		if ($next.length) {
    		$next.addClass('w--current'); 
    }
    else {
        $(".tablink:first").addClass('w--current');
    }
    var $next2 = $('.tabpane.w--tab-active').removeClass('w--tab-active').next('.tabpane')
    if ($next2.length) {
    		$next2.addClass('w--tab-active'); 
    }
    else {
        $(".tabpane:first").addClass('w--tab-active');
    }
});
</script>
<script>
$('#ctaback').click(function(){
    var $prev = $('.tablink.w--current').removeClass('w--current').prev('.tablink')
		if ($prev.length) {
    		$prev.addClass('w--current'); 
    }
    else {
        $(".tablink:first").addClass('w--current');
    }
    var $prev2 = $('.tabpane.w--tab-active').removeClass('w--tab-active').prev('.tabpane')
    if ($prev2.length) {
    		$prev2.addClass('w--tab-active'); 
    }
    else {
        $(".tabpane:last").addClass('w--tab-active');
    }
});
</script>

This is the public link:
https://preview.webflow.com/preview/pagingtest?preview=b4ccf4e11d3ff82e50083ddf984074f4

Live Test:
http://pagingtest.webflow.io/

Regards
Daniel

@Bim
Fixed the “Backwards” pagination. Now it should work 100% correct.

Live Test:
http://pagingtest.webflow.io/

You will to have to style every element so that you only have the numbers visible like in your example above.
But the main core works good. If you need any further advice or detailed information about how to set it up, leave me a message.

Daniel

2 Likes

p.s. I created the same style that you probably need. Check the url.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.