Streaming live at 10am (PST)

Show 1 next item with 'limit items' setting set to 1, but don't start at 1


#1

hi there,

Ok I will try to explain my issue here. I’ve got a collection with multiple items. I want on the bottom of the page of every item a ‘next’ button with the thumbnail image of the next item. When you are on item 1 it will bring you to item 2 and when you are on item 2 it will bring you to item 3 etc.

So on the detail page of an item I created a button. That button I put in a new collection to dynamically give me the thumbnail image and link to the next item. But I’m getting stuck with a problem that has to do with the ‘limit items’. Because I’m only showing the information of 1 item in the button I choose the option 'limit items; and set the limit to 1. But I don’t want to start at 1. So I want to leave that one blank and automatically link to item 2,3 etc.

I’ve already create a reference called ‘next’ in my collection to itself. So item 1 needs to link to item 2 etc. But because of the ‘limit items’ setting this is getting overruled.

Here is my read-only link. It’s about the collection called ‘products’ https://preview.webflow.com/preview/wonder-media?utm_source=wonder-media&preview=65497c0634a933a302b7fa83f237a1c1

Thanks


#2

hey man.
i guess theres no native webflow way of doing this. at least until the pagination feature is done.

i implemented a solution for this using javascript (jquery). its actually quite easy. just add a hidden (display: none) collection list to your site. add a link inside each item. link it to each page. then grab the element by its active class. i guess its somethink like w-current or something. then grab the next element in the list. and if theres no following item, grab the first again. and voila there you go. an infinite loop.

:blush:


#3

Cool, thanks @buntestrahlen!
Could you share the jQuery code that you used. And could you have a look at my preview to link for the best way to implement this?

Thanks again!


#4

Thanks to the help of @buntestrahlen i figures this out. Here a little step-by-step to create a ‘see next’ item.

Here an overview of the steps you have to take:
1. Get rid of all your limitations and sorting settings

2. Do a little test in your browser
Open the page with the selected blog or collection item on it. Click on insect element and you should see:

You see that the active link has a classed called <w-current>. The others don’t have that because they are not currently active. We know this is the current one so we need the w-dyn-item to show next and only display that.

To do that. We use the following code:

$(document).ready(function() {

	var next = $('.cms-next-button.w--current').closest('.w-dyn-item').next();
	if (!next.length) { next = $('.link-blog-next.w-dyn-list .w-dyn-item').eq(0); }
	$('.link-blog-next.w-dyn-list .w-dyn-item').not(next).remove();
});
</script>

`

Let me explain what the above code does:

  • First we create a variable named next

  • We look for our w--current item. then go up the dom tree and look for the closest w-dyn-item. then choose the next one in the tree. which is the following one.

  • then we remove all w-dyn-items but not our next.

3. Now show the first one when you are on the last collection item
If we view the last post there is now next, so to show the first blog post again we use the following code:

var next = $('.cms-next-button.w--current').closest('.w-dyn-item').next();
if (!next.length) { next = $('.link-blog-next.w-dyn-list .w-dyn-item').eq(0); }
$('.link-blog-next.w-dyn-list .w-dyn-item').not(next).remove();

What we did: so we add a line of code. if next has no length (so is not set), set it to be the first item with eq(0). its index-based and they always start with 0. so 0 is the first.

4. Add it in your footer custom code
If above all makes sense then it’s time to paste the last code in the footer section of your website:

<script>
$(document).ready(function() {

	var next = $('.cms-next-button.w--current').closest('.w-dyn-item').next();
	if (!next.length) { next = $('.link-blog-next.w-dyn-list .w-dyn-item').eq(0); }
	$('.link-blog-next.w-dyn-list .w-dyn-item').not(next).remove();
});
</script>

The ready function waits for the dom tree fo be fully loaded. and then fire. so your safe and it doesnt get loaded before your content did.

So that’s it. All credits go to Jaro Quastenberg @buntestrahlen for helping me out and guiding me step by step.