CMS Next / Prev

Newer Tutorial Available

Cloneable

Add to before </body> tag in page or project settings

<script>
// CMS NEXT POWER-UP
window.addEventListener("DOMContentLoaded", (event) => {
  $("[tr-cmsnext-element='component']").each(function (index) {
    let componentEl = $(this),
      cmsListEl = componentEl.find(".w-dyn-items").first(),
      cmsItemEl = cmsListEl.children(),
      currentItemEl,
      noResultEl = componentEl.find("[tr-cmsnext-element='no-result']");
    cmsItemEl.each(function (index) {
      if ($(this).find(".w--current").length) currentItemEl = $(this);
    });
    let nextItemEl = currentItemEl.next(),
      prevItemEl = currentItemEl.prev();
    if (componentEl.attr("tr-cmsnext-loop") === "true") {
      if (!nextItemEl.length) nextItemEl = cmsItemEl.first();
      if (!prevItemEl.length) prevItemEl = cmsItemEl.last();
    }
    let displayEl = nextItemEl;
    if (componentEl.attr("tr-cmsnext-showprev") === "true") displayEl = prevItemEl;
    if (componentEl.attr("tr-cmsnext-showall") === "true") {
      prevItemEl.addClass("is-prev");
      currentItemEl.addClass("is-current");
      nextItemEl.addClass("is-next");
    } else {
      cmsItemEl.not(displayEl).remove();
      if (!displayEl.length) noResultEl.show();
      if (!displayEl.length && componentEl.attr("tr-cmsnext-hideempty") === "true") componentEl.hide();
    }
  });
});
</script>

Copy Code

Apply the required attributes

Required Elements

This component contains a collection list and optional no result div

*each child cms item must contain a link block to its own cms page

Name

tr-cmsnext-element

Value

component

Optional settings for this element

loop when beginning / end of cms list is reached

Name

tr-cmsnext-loop

Value

true

show previous item instead of next item

Name

tr-cmsnext-showprev

Value

true

show all items and give them combo classes of is-prev, is-current, is-next

Name

tr-cmsnext-showall

Value

true

hide component when there's no next / prev cms item to show

Name

tr-cmsnext-hideempty

Value

true

Name

Value

Optional Elements

Set this no result div to display block when there's no cms item to show

Name

tr-cmsnext-element

Value

no-result

Optional settings for this element

Name

Value

Name

Value

Name

Value

Name

Value

Name

Value

Optional Settings

No items found.

Project Cloneable

Original Website

Project Code

Starter File

Design File

Documentation

All Resources

No items found.