Skip to main content
Skip to video
Skip to article

How to sync two nestable sliders (thumbnail carousel) in less than 4 minutes using Bricks Builder for WordPress

Bricks, JS
3,570 views

Quickly sync two nestable sliders in Bricks Builder for WordPress.

function initSync() {
  initTimeout = setTimeout(syncSliders, 50);
}
 
function syncOnResize() {  
  resizeTimeout = setTimeout(syncSliders, 260);  
 
}
 
function syncSliders() {  
  const	main = bricksData.splideInstances['47db29'],
  			thumbnail = bricksData.splideInstances['636b7b']
 
   if( main && thumbnail) {
   main.sync(thumbnail)
 
  }
 
  clearTimeout(initTimeout);  
 
}
 
 
 
document.addEventListener( 'DOMContentLoaded', initSync)
 window.addEventListener("resize", syncOnResize)
{
   "type":"slide",
   "direction":"ltr",
   "keyboard":"global",
   "height":"auto", 
   "gap":10,
   "start":0,
   "perPage":"3",
   "perMove":1,
   "speed":400,
   "interval":3000,
   "autoHeight":true,
   "autoplay":false,
   "pauseOnHover":false,
   "pauseOnFocus":false,
   "arrows":false,
   "pagination":false,
   "focus": "center",
   "isNavigation": true,
   "updateOnMove": true, 
 
 
 
   "breakpoints":{
      "580":{
         "perPage":"2"        
      },
 
      "320":{
         "perPage":"1"        
      }
   }
}

OPTIONAL:

Extra tip from Maxime Beguin in Bricks group: For use with multiple sync sliders, give your main and thumb sliders classes and use this JavaScript instead of the one above

document.addEventListener('DOMContentLoaded', () => {
 
   // Query all the wrappers
   const wrappers = document.querySelectorAll('.sync-sliders-wrapper');
 
   // Stop the function if there is no sync slider
   if (wrappers.length < 1) return;
 
   // Init function
   let init = (mainSliderId, thumbSliderId) => {
      const main = bricksData.splideInstances[mainSliderId],
         thumbnail = bricksData.splideInstances[thumbSliderId];
 
      // stop the function if the both sliers instances doesn't exist
      if (!main || !thumbnail) return;;
 
      // Mount the sync slider
      main.sync(thumbnail);
 
   };
 
   // Loop into each wrapper
   wrappers.forEach(wrapper => {
 
      // Set the ID's of sliders
      const mainSlider = wrapper.querySelector('.sync-sliders-main'),
         mainSliderId = mainSlider.dataset.scriptId,
         thumbSlider = wrapper.querySelector('.sync-sliders-thumb'),
         thumbSliderId = thumbSlider.dataset.scriptId;
 
      // Run the function on load
      setTimeout(() => {
         init(mainSliderId, thumbSliderId);
      }, 0);
 
      // Rerun the function on resize because bricks reinit the sliders on each resize event
      window.addEventListener("resize", () => {
         setTimeout(() => {
            init(mainSliderId, thumbSliderId)
         }, 300);
      });
   });
});
Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how Design with Cracka is funded, why it matters, and how you can support us.
Join the Community
Join over 7000 learners and contributors on Design with Cracka community. Don't miss out on the conversations!
0 0 votes
Article Rating
Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Jan
Jan
1 month ago

Hello Cracka, is it also possible that there is an offset between the main slider and the thumbnails. I want to place the sliders next to each other and create the illusion that the thumbnail on the right slides in to the main on the left

Leave a Reply

Your email address will not be published. Required fields are marked *

dicecartselectearthcrossarrow-rightlayerstext-align-center
2
0
Would love your thoughts, please comment.x
()
x