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.
-
Accessibility and Ajax Load More
Building inclusive and accessible websites with Ajax Load More.
-
Introducing the WooCommerce Add-on for Ajax Load More
Infinite scrolling WooCommerce shop and product archives.
-
Join Our Affiliate Program
As a Connekt affiliate you will earn 25% commission on each successful sale.
-
Elementor Infinite Scrolling with Ajax Load More
A guide for infinite scrolling Elementor single post articles with Ajax Load More.
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 as the styling for the scroll_container and scroll_direction wrapper.
1 2 3 4 5 |
#alm-horizontal { display: block; padding: 10px; border: 2px dashed #efefef; } |
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"]