Slider

Synchroniser 2 sliders

Synchroniser des sliders

Copier ce script

Etape 1

Copier le script et le coller sur votre page ou projet Webflow

<script>
var Webflow = Webflow || [];
Webflow.push(function() {

  // Cache 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

});
</script>
Copier

Etape 2

Intégrer sur Webflow en adaptant à votre projet et votre configuration

  • Remplacer l'ID du slider-dot de votre premier Slider qui va déclencher le changement de slide de votre deuxième Slider (ici #sourceNav)
  • Remplacer l'ID des dots de votre deuxième Slider (ici #targerNav)