Horizontal Scroll
Using CMS with anchor links
Section 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Section 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Section 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Section 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
How to edit
You will need 3 instances of the same CMS - one for the navigation, one for the content and one for the anchors.
Make sure you link the Name and Slug to HTML Embed inside the scroll_nav and order them correctly by sorting them.
Make sure the same order is followed by all 3 CMSs.
Link all the content elements within the scroll_item to the CMS.
Make sure you link the ID of the scroll_anchor to the Slug.
Finally, add the following code in the <body> custom code.
<script>
// Get the number of .scroll_item elements inside .scroll_horizontal-cms
var itemCount = $('.scroll_horizontal .scroll_item').length;
// Calculate the width
var width = itemCount * 100 + 'vw';
// Assign the calculated width to .scroll_horizontal
$('.scroll_horizontal').css('width', width);
</script>
And all you need to do is add more items to the CMS and it will automatically scale.