Hello,
Implementing the CMS Next/prev attribute, I realize that it doesn’t work on all pages.
I think this is due to the limit of 100 items in a list collection.
For example, it’s ok on this page: Asana - Pricing Page Analysis
But not on this one: Lemlist - Pricing Page Analysis
How can I remove the limit of 100 items to be displayed in the list collection so that it works?
Thanks for your help
hey @Fabien_mnt! You can try adding the CMS Load Attribute to the list used for the setup with the render-all load mode.
Let me know if this works 
Hi,
I’m experiencing difficulties getting this to work. Could you please help? I’m using ‘cms load’ on the list with ‘render all’, but for some reason, it doesn’t work and breaks on ‘blogs/collection-v-13.’ Any ideas on how to solve this? Would be greatly appreciated. Thanks!
hey @eklundpetter! Can you test this snippet on your template page </body> tag?
<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
'cmsload',
(listInstances) => {
console.log('cmsload Successfully loaded!');
window.fsAttributes.cmsprevnext.init();
},
]);
</script>
Let me know how it goes!
Works perfect, thanks
1 Like
Another question related to the previous/next is, is there a solution to make the navigation work not only with a click but also with the keyboard, for example, the left and right arrow keys?
Hey @eklundpetter, there is no solution for this natively, however, you can try to add some custom code so that when a key is pressed you trigger a click on the next/previous elements.
Let me know if you are comfortable with JS or if you need any help with this
Hi, I’m not super comfortable with JS. I would be really thankful if you can help, thanks in advance
hey @eklundpetter! This code should achieve what you are after.
You’ll need to add the data-key attribute to your previous and next elements, I believe you have used text links for this, the value of these attributes are:
data-key = 37for the Previous/left arrowdata-key = 39for the Next/right arrow
<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
'cmsload',
(listInstances) => {
console.log('cmsload Successfully loaded!');
window.fsAttributes.cmsprevnext.init();
window.addEventListener('keydown', (e) => {
const post = document.querySelector(`[data-key="${e.keyCode}"]`);
if (!post) return;
post.click();
});
},
]);
</script>
Hi, thanks for your help. The only way I got the keyboard navigation to work is by placing two links with unique attributes in the structure like this. I guess I’m doing it wrong since I get a double display of items?
Sorry, forget the latest reply; The navigation didn’t work after all; it only goes in one direction
Your help is much appreciated. Thanks again.
1 Like
Any ideas how to solve this?
Hey @eklundpetter! What is the issue? I thought you had it solved as you told me to forget the last reply.
Can you give a little more info?
Oh, sorry, there was a misunderstanding. At first, I thought the functionality was working, but then it didn’t. I’m not sure where to put the data-key attributes in the structure
Trying to insert links with attributes inside the divs ‘.fs-prevnext_item’ and ‘.fs-prevnext_item .next’ is not triggering any clicks
However, inside ‘fs-prevnext_content,’ it triggers clicks. Since it’s a collection item, I don’t know how to add two attributes without displaying duplicated items."
On the right hand you have a field for Custom Attributes you can set the data-key to the dynamic link block and this should not duplicate items. Have you tried this?
Yes,but on the link box I can only put in 1 data-key attribut on the same link? this will only work for the keyboard in one direction?
I see the issue now, could you please add the code to your test site? This one → Petter's Sublime Site
I’ll work on a fix that adds the data attribute to the link inside the items
Perfect. Here is a read-only link to the site I’m working on. The prev/next buttons are on the ‘photos’ template