Scroll Direction

Changing the loading direction of the Ajax Load More

In this example:
Ajax Load More will infinite scroll a list of posts horizontally within a container.

Using the scroll_container and scroll_direction=”horizontal” parameters Ajax Load More will load posts side-by-side in a horizontal order.

Note: You must define a scroll_container when using a horizontal scroll_direction.

Here are a few quick bits of information regarding the use of a horizontal scroll_direction in Ajax Load More:

  1. The example above uses the default (out-of-the-box) Repeater Template.
  2. Ajax Load More will default to Flexbox layout when scroll_direction is horizontal.
  3. Always use an infinite scroll loading style as CSS styling when using the horizontal load more functionality. Support for the load more button has yet to be added to the core plugin.

The following CSS was used as the styling for the scroll_container and scroll_direction wrapper.

The following shortcode was used to create the Scroll Direction example.

[ajax_load_more preloaded="true" preloaded_amount="4" posts_per_page="4" loading_style="infinite classic" scroll_container="#alm-horizontal" scroll_direction="horizontal" scroll_distance="-100" pause="true" pause_override="true"]