Natively Sync 2 Nestable Sliders

Feature Requests / Improvements
1

Hey guys, I saw on BricksUltimate plug-in website that they got a “Nestable Slider syncing option” I was wondering why this isn’t a possible native option for Bricks? Would it be possible for Bricks to add the option for 2 different sliders to sync?

In my opinion, it would be great instead of buying a whole plug-in I don’t need just for that option.

sync-options

website: Sync Two Nested Sliders without Any Code - BricksUltimate

3 Likes
2

I also do not like plug-in for small tweaks.

Anyway you can use this with new interactions like so.

Place this to Body (footer) scripts on page with sliders:

<script>
function syncSliders(brxParam) {
  const source = brxParam?.source.dataset.scriptId || false;
  const target = brxParam?.target.dataset.scriptId || false;

  if (!source || !target) {
    return; // Exit function if either source or target is not available
  }

  const main = bricksData.splideInstances[source];
  const thumb = bricksData.splideInstances[target];

  if (main && thumb) {
    main.sync(thumb);
  }
}
</script>

Set this interaction on main slider:

Screenshot 2024-01-30 at 21.42.03
Screenshot 2024-01-30 at 21.42.03556×1780 69.7 KB

3 Likes
3

Thanks @MartinWB !

I have made some change to your idea :slight_smile:

On the first nested slider, I have added a attribute : data-sync-source
On the second nested slider, data-sync-target

The value is true for both of them.

In functions.php, I add these lines:

    // Sync Slider JS file
    wp_enqueue_script('sync_sliders', get_stylesheet_directory_uri() . '/js/sync_sliders.js', array(), false, true);

And my sync_sliders JS file content:

document.addEventListener('DOMContentLoaded', function () {
    function syncSliders() {
        // Retrieves the primary and secondary slider elements via their data attributes
        const mainSlider = document.querySelector('[data-sync-source="true"]');
        const syncSlider = document.querySelector('[data-sync-target="true"]');

        if (!mainSlider || !syncSlider) {
            console.warn("The primary or secondary sliders were not found.");
            return;
        }

        const mainId = mainSlider.dataset.scriptId;
        const targetId = syncSlider.dataset.scriptId;

        // Retrieves slider instances in bricksData
        const main = bricksData.splideInstances?.[mainId];
        const thumb = bricksData.splideInstances?.[targetId];

        if (main && thumb) {
            main.sync(thumb);
            console.log("The sliders have been successfully synchronized.");
        } else {
            console.warn("Synchronization failed, retry in progress...");
            setTimeout(syncSliders, 500);
        }
    }

    syncSliders();

    window.addEventListener('resize', syncSliders);
});

I hope this helps some people :smiley:

2 Likes