Bricks Builder has a flexible slider module called “Slides (Nestable)” which allows each slide to be built from scratch within the builder. In some cases, it may be necessary to create external tab-like navigation. In order for the following code to work properly, we need 3 things:

1. The second half of the slider ID. By default, Bricks gives every element an ID with two parts: the prefix and the unique ID (for example: #brxe-abcdef). We only need the unique ID section.
2. The tab wrapper class name. This is the class name we give the element that will wrap our navigation elements.
3. The active tab class name. This is the class name we give to the navigation element that corresponds with the active tab. Normally, the first slide will be active by default, so we’ll add this class to the first navigation element and then reference it in our code.

You’ll notice the 3 variables at the top of the code correspond with the 3 items in the numbered list I just described.

If we place the code in a code element at the bottom of the page (and make sure the code is executable), it should just work! Each tab will automatically be matched to the corresponding slide.

The code is thoroughly documented, so I’m not going to try to explain it all.

(function() { // IIFE to avoid polluting global scope
  document.addEventListener('DOMContentLoaded', (event) => {
    // Wait for Bricks to initialize the sliders
    setTimeout(() => {
      // Variables that can be customized for each implementation
      const sliderId = 'carreo'; // ID of the Splide slider
      const tabWrapperClass = 'tab-wrap'; // Class of the tab wrapper container
      const activeTabClass = 'tab-active'; // Class for the active tab
      
      // Find all tab wrapper containers on the page
      const tabWrappers = document.querySelectorAll(`.${tabWrapperClass}`);
      
      // Error handling - check if bricksData exists
      if (!window.bricksData || !window.bricksData.splideInstances) {
        console.warn('Bricks slider data not found. Make sure Bricks and Splide are properly initialized.');
        return;
      }
      
      // Get the slider instance
      const sliderInstance = window.bricksData.splideInstances[sliderId];
      if (!sliderInstance) {
        console.warn(`Slider with ID "${sliderId}" not found or not initialized.`);
        return;
      }
      
      tabWrappers.forEach(tabWrapper => {
        // Get all immediate children of the tab wrapper (these are the tabs)
        const tabs = Array.from(tabWrapper.children);
        
        // Define the handleTabClick function once outside the loop
        const setActiveTab = (activeIndex) => {
          // Remove active class from all tabs
          tabs.forEach(tab => tab.classList.remove(activeTabClass));
          
          // Add active class to the tab that corresponds to the current slide
          if (tabs[activeIndex]) {
            tabs[activeIndex].classList.add(activeTabClass);
          }
        };
        
        // Use event delegation for tab clicks
        tabWrapper.addEventListener('click', (event) => {
          // Find which tab was clicked (or which tab contains the clicked element)
          const clickedTab = tabs.find(tab => tab === event.target || tab.contains(event.target));
          
          if (clickedTab) {
            const tabIndex = tabs.indexOf(clickedTab);
            sliderInstance.go(tabIndex);
            setActiveTab(tabIndex);
          }
        });
        
        // Sync tabs when slides change via arrows or pagination
        sliderInstance.on('moved', function(newIndex) {
          setActiveTab(newIndex);
        });
      });
    }, 500); // 500ms delay to ensure Bricks has initialized
  });
})();