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
2,105 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
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
raking
1 year ago

Ι feel tһat is οne of the so much significant info for me.
And i’m satisfied studying your article.
But wanna commentary on some normal issues, The site style is great, the articles is in point of
fact great : D. Good аctivity, cheеrs

Leave a Reply

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

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