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.jsdelivr.net/npm/@justaa/scripts/dist/sliders/slider-synchro.js"></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>

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

Customiser les dots

Nom

Valeur

Le CSS que j'utilise pour personnaliser les dots

Nom

Valeur

Nom

Valeur

Nom

Valeur

Nom

Valeur

Tuto

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>