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.
-
Ajax Load More 7.0
Refactoring Ajax Load More for the future.
-
Tracking Pageviews with Google Analytics 4
Measuring page views automatically with GA4 and Ajax Load More.
-
Ajax Load More 5.6
A release focused on new features, facet filtering and extending existing functionality.
-
Instant Images Adds Openverse API Integration
Instant Images now offers API integrations with Unsplash, Openverse, Pixabay and Pexels, providing access to millions of high-quality images in a single WordPress plugin.
Here are a few quick bits of information regarding the use of a horizontal scroll_direction in Ajax Load More:
- The example above uses the default (out-of-the-box) Repeater Template.
- Ajax Load More will default to Flexbox layout when scroll_direction is horizontal.
- 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 to style the scroll_container
and scroll_direction
wrapper.
#alm-horizontal {
display: block;
padding: 10px;
border: 2px dashed #efefef;
}
CSSThe 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"]
The following Repeater Template was used to create the Scroll Direction example.