Hey folks,
I am not quite sure if that topic was handled before. It it was them I m sorry but if not, maybe some of you are interested on how to create a fake pagination for any kind of content.
(Beware that this is not a complete solution for you dynamic content fans out there because there is a 10 dynamic list restriction per page).
[FIRST]
Lets create some example structure.
Goto “Add Element” and drop in a “Section”. Within that Section let’s add a “Container” and an empty “Div-Element”.
It should look like this:
(you can adapt that later into your project, because the outer section and the container are just for demo purpose).
[SECOND]
Select the emtpy “Div-Element” and give it a class name. (e.g. tabbox). Its the outer container for the tab-widget and the two pagination arrow elements.
Apply: Position “Relative” to the div “tabbox”. We do that because we want to positon the previous and next arrow absolute to the tab-menu later.
[THIRD]
Go to “Add Element” and add a “Tabs-Component”.
A) Drag and Drop the “Tabs Menu” under the “Tabs Content”
B) Select “Tabs Menu” and give it a class (e.g. tabmenue). Apply “Typography → Text-Align: Center”
C) Give the “Tabs” within “Tabs Menu” a class (e.g. “tablink”). Each Tab-Link must have the same class name. Do that same process for all “Tab Content” Containers within “Tabs Content”. They of course must have a different class name (e.g. tabpane).
Your Tabs-Component should look like this:
(I have added 5 tab elements / links in this example, so if you havent added more there are only 2 elements inside).
Note:
If you want to have a normal pagination look and feel, apply styles to the “tablink” class (like no background-color, text only, link color, hover: underline, current element: underline and so on).
[FOURTH]
Goto the Div Element “tabbox” and add two call to actions OR just regular links. Give them some class name. (e.g. cta) - or something better like (pagination link)…i ll leave it to cta in this example.
A) Then select the first one and give it a sub class of “back”, select the other one and give it a sub class of “next”. Like this:
B) You may want to apply the same style to these links so that they match to the “Tab Links” - or not if you want to have them a different look.
C) Give them also two different #ID’s. Select the first cta element. Go to “Settings” and give it an id of “#ctaback”. Repeat that with the other cta element and name its id: “#ctanext”.
D) Apply position: absolute - bottom left to the first cta element. Position: absolute - bottom right to the last one. Example:
The whole tree looks now like this:
[RESUMEE]
- cta links do have a class, subclass and an id tab
- List item links all have the
same class as do all tabs content element - tabbox is set to relative, ctas are set to absolute - because they
own a sub class they can have different positions (bottom left,
bottom right).
[CUSTOME CODE]
Go to the dashboard → custom code or the code field on that specific site and enter this code:
I am not a code expert, so this might seem a bit odd. But in this example we will trigger the click function on the first cta / link element with an id of #ctanext and the other cta / link with an id of #ctaback separately.
If you selected any other class name than me in my example you have to swap these names out within the cusomt code…of course. otherwise it wont work.
<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');
}
});
$('#ctaback').click(function(){
var $prev = $('.tablink.w--current').removeClass('w--current').prev('.tablink')
if ($prev.length) {
$prev.addClass('w--current');
}
else {
$(".tablink:last").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>
[LAST BUT NOT LEAST]
Copy paste or add some content element in each “Tabs Content” Subelement. So that you see something when you click through all tabs.
Now it should work. If not there is something missing or you have to edit all class names within the custom code and make it fit to your values that you entered for the elements.
If you have any trouble or question feel free.
This is a working live demo: http://daniels-pagination.webflow.io
Public share link: https://preview.webflow.com/preview/daniels-pagination?preview=7932e8db176eb48d1e2c27d9a1a3c191
Regards
Daniel