Now streaming live

How to Make Two Webflow Sliders Slide Together


#1

Created this tutorial for the community:
http://webflow-tricks.webflow.io/how-to-sync-webflow-sliders

An example can be seen on my latest project at:
http://singapores-child.webflow.io (home featured image + text, below the hero)

You are free to clone this project "Webflow Tricks" from my profile, so you can see how it works.


Is there a way to replicate this slider in Webflow?
Conditional visibility of two elements (linking dynamic lists)
#2

So cool! Thanks for sharing with everyone!


#3

Impressive! :+1: Thank you Samuel


#4

Great, thanks for sharing!
And what a nice site by the way :smile:


#5

@samliew What an awesome site and great tutorial!

I just wanted to point out that jQuery is automatically published with all Webflow sites, and you don't need to add it again. If you do, it will force the user's browser to download it twice, which is twice as slow.

:point_up: The green arrow points to the version Webflow already includes, and the red arrow points to your embed - which is safe to remove (from the tutorial as well).

This is a great reminder to upgrade our automatically included version to the v1.11.3 :smile:


#6

@callmevlad Thanks for your observation. This fixes the "‍This script doesn't seem to work when placed in the page (head/footer) custom code, or site-wide (head/footer) custom code." problem.

So now, there are two options,

  • If you want to use Embed component, you have to include jQuery before it, as the Embed component will be before the default Webflow's jQuery include.
  • Otherwise, you can put the script in the Page settings -> Custom Code -> Before body tag, but without inserting jQuery

I will change the tutorial to the second option.


#7

@samliew Ah, good point!

If you want to stick with the first option, you can wrap the code in a $(document).ready(...) block to make sure it only executes after jQuery and the document have loaded :thumbsup:

https://learn.jquery.com/using-jquery-core/document-ready/

Also, pinging @danro in case he has a better way to detect slide changes without polling via setInterval.


#8

@callmevlad From my understanding, the Webflow slider API is not publicly available.

References:


#9

@samliew Neat workaround! Currently the interval/polling approach is probably the best way to accomplish this. As you've discovered, many of our components are lacking a public API. This is intentional, as we are working on getting it right. :smile:

In the meantime, your polling approach should do the trick. Here's a slightly more optimized snippet:

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
  
  // Store cached references to nav elements
  var sourceNav = $('#sourceNav');
  var targetNav = $('#targetNav');
  
  // Every 200ms
  setInterval(function() {
    
    // Find the index of source slideNav button's active class
    var index = sourceNav.children('.w-active').index();

    // Update target slider by triggering a "tap" event on the targetNav corresponding slide button
    targetNav.children().eq(index).trigger('tap');

  }, 200); // End interval
  
}); // End ready function
</script>

Using the Webflow.push() wrapper instead of $(document).ready() means you can place the code snippet anywhere on the webflow site (even in embed blocks).

Hope that helps!


#10

@danro Thanks for the Webflow.push() tip! I'll update the tutorial.


#11

@samliew , awesome tutorial, I love it that you figured out how to do this! thanks!

I cloned this and really learning from it.

But

I do not see the custom code in the site settings.

I also don't see any embed element.

I do see the custom code when I view page source at the bottom.

confused how this is working

Edit: its on the actual page at the bottom in the page's settings :stuck_out_tongue: stupid me!


#12

Hi @TravisBKlein,

Yes, there are multiple ways to include the code.

  1. Site settings > Custom code

  2. Page settings > Custom code

  3. Embed component

You generally want to avoid using Site Settings as it will apply sitewide. Using that code may degrade performance as the script is being called 5 times per second (200ms), so you only want it to apply to the page itself that needs this feature.


#13

hi @samliew,

great solution, however I found that other sliders, and/or hover navigations where affected, if you do not check for the current slider before triggering the tap event. Bubbling occurs and every 200ms other elements may be affected.

here's an updated version of the code:

<script type="text/javascript" >
var Webflow = Webflow || [];
Webflow.push(function () {
          
    // Cache references to nav elements
    var sourceNav = $('#sourceNav');
    var targetNav = $('#targetNav');
    var currentSlide = 0;
    // Every 200ms
    setInterval(function() {
            // Find the index of source slideNav button's active class
            var index = sourceNav.children('.w-active').index();
              
            // Prevent tap on current
            if(index !== currentSlide){
    	    // Update target slider by triggering a "tap" event on the targetNav corresponding slide button
    	    targetNav.children().eq(index).trigger('tap');
    	    currentSlide = index;
            }

    }, 200); // End interval
      
});
</script>

Cheers,
P.


#14

Hello,
Thank you so much for that bit of code. It works great for to sync two sliders together. I am attempting to have this work with two sets of synced sliders which each function independently. In other words I am trying to get the following:

  1. Slider Set 1 contains sourceNav1 and targetNav1. When sourceNav1 is used, targetNav1 syncs with it (Slider set 2 remains unaffected)

  2. Slider Set 2 contains sourceNav2 and targetNav2: When sourceNav2 is used, targetNav2 syncs with it (Slider set 1 remains unaffected)

Curious if anyone has suggestions modifying the code to handle this scenario? Any help would be greatly appreciated!

Thank you!


#15

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.