Tous nos scripts

Slider

Synchroniser 2 sliders

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

Etape 1 - 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>
Copier

Etape 2 - Ajouter les attributes correspondants

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

Copié !

Valeur

target

Copié !

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

<style>
.w-slider-dot {
		display: inline-block !important;
    bottom: 0;
    z-index: 100;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(0,0,0,.5);
    border-radius: 50%;
    background-color: white !important;
    cursor: pointer;
}

.w-active {
	background-color: rgba(242,215,76,1) !important;
}

.w-slider-dot:focus {
    outline: 0;
    box-shadow: 0 0 0 0px;
}
</style>

Nom

Valeur

Nom

Valeur

Nom

Valeur

Nom

Valeur

Tuto, template & scripts

Tuto

Template

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>
Copier

Etape 2 - Ajuster le code pour votre besoin

Copié dans le presse-papiers
Logo Justa

Progressez sur Webflow

Oops! Une erreur s'est produite lors de la soumission du formulaire.