Synchroniser 2 sliders

Synchroniser des sliders

Language: Javascript

Catégorie : Slider

<script>

$(document).ready(function () {
  var sourceNav = $('[js-slidersync-element="source"]');
  var targetNav = $('[js-slidersync-element="target"]');

  setInterval(function () {
    // Find the index of source slideNav button's active class
    var index = sourceNav.children('.w-active').index();

    targetNav.children().eq(index).trigger('tap');
  }, 200);
});

</script>

Sommaire

Utiliser un LLM pour résumer ou expliquer ce script

Le script

Ajouter le script sur la page ou le projet Webflow

<!-- Scripts by Justa | Sync Slider -->
<script src="https://cdn-scripts.justa.fr/dist/sliders/slider-synchro.js"></script>

Les attributes

Slide Nav - Identifier le premier élément Slider (déclencheur)

Nom

js-slidersync-element

Valeur

source

Ajouter l'attribute à l'élément Slide Nav du Slider qui sera celui qui déclenchera la synchronisation avec le 2ème Slider

Slide Nav - Identifier le deuxième élément Slider

Nom

js-slidersync-element

Valeur

target

Ajouter l'attribute à l'élément Slide Nav du Slider qui sera celui qui sera synchronisé avec le 1er Slider de votre page

Synchroniser 2 sliders : Tutoriel

Template

Code source du script

<script>

$(document).ready(function () {
  var sourceNav = $('[js-slidersync-element="source"]');
  var targetNav = $('[js-slidersync-element="target"]');

  setInterval(function () {
    // Find the index of source slideNav button's active class
    var index = sourceNav.children('.w-active').index();

    targetNav.children().eq(index).trigger('tap');
  }, 200);
});

</script>