5. Global Splide Controls (Custom Arrows & Progress Bars)

Pixflow layouts that use Splide sliders can optionally include custom arrows and progress bars.
To keep things fast, clean, and consistent across your site, these features are powered by a single global JavaScript snippet.

You only need to install this once per site. After that, any Pixflow layout that supports custom Splide controls will work automatically.

What This Does

This one-time snippet:

• Enables custom Splide arrows across supported Pixflow layouts
• Enables Splide progress bars where included
• Ensures consistent behavior across all layouts
• Prevents duplicated JavaScript being loaded on every page
• Improves performance and maintainability

Once installed, all compatible layouts will “just work” — no extra setup per layout.

One-Time Setup (Required)

You only need to do this once per site.

This snippet will be included in all slider layouts that use custom arrows and/or progress bars in our libraries, but you only need to install it once per site.

How to Install

1. Copy the JS snippet
   Copy the Splide global controls JS script from the
   👉 “See instructions inside” code block in your Pixflow layout.
2. Paste it into your site-wide footer
   Add the snippet just before the closing </body> tag on your site.
3. Clear cache
   After saving, clear:
   • Your site cache
   • Any caching plugins
   • Your CDN cache (Cloudflare, etc.)

That’s it. No further setup is required.

Best Practice: Use a Snippet Manager (Highly Recommended)

Instead of pasting this into theme files directly, we strongly recommend using a snippet manager or custom code injection tool.

Why This Is Better

Using a snippet manager means:

• ✅ Your code won’t be lost when your theme updates
• ✅ You can disable or edit snippets safely
• ✅ You keep all global scripts in one place
• ✅ Easier debugging if something goes wrong
• ✅ Cleaner separation between layout code and site logic

Recommended Options (WordPress)

You can use any of the following:

• WPCodeBox2 – Our recommendation
• WPCode
• Code Snippets
• Custom theme footer injection (only if you control the theme)

Example setup:

• Location: Footer
• Load on: Entire Site or Only the pages your sliders are used on
• Script type: JavaScript

Why This Is a Global Snippet (Not Per Layout)

You may notice this code is not embedded directly inside each Pixflow layout. This is intentional.

Benefits of a Global Script

• Better performance (loaded once, reused everywhere)
• Avoids duplicate event listeners
• Easier updates when we improve slider logic
• Cleaner layout exports (less JS inside layouts)
• Prevents conflicts if multiple sliders appear on the same page

Common Issues & Fixes

My arrows or progress bars aren’t working

Check:

• The snippet is:
  • In the footer
  • Loaded site-wide
• Your cache/CDN has been cleared
• There are no JavaScript errors in your browser console

It works on one page but not another

This usually means:

• The snippet was added to a single page template instead of globally
• Or your caching plugin is serving an old version

Fix:

• Move the snippet to a global footer injection
• Clear cache again

Do I Need to Add This Again for New Layouts?

Nope.
Once this snippet is installed, all current and future compatible Pixflow layouts will work automatically.