Naviguer dans un slider avec le clavier

Naviguer avec les flèches dans un slider améliore l'accessibilité de votre site

Language: Javascript

Catégorie : Slider

<script>

document.addEventListener('keyup', function (event) {
  if (event.key === 'ArrowLeft') {
    document.querySelector('.w-slider-arrow-left').click();
  }
  if (event.key === 'ArrowRight') {
    document.querySelector('.w-slider-arrow-right').click();
  }
});

</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 | Slider Keyboard -->
<script src="https://cdn.jsdelivr.net/npm/@justaa/scripts/dist/sliders/slider-keyboard.js"></script>

<script>

document.addEventListener('keyup', function (event) {
  if (event.key === 'ArrowLeft') {
    document.querySelector('.w-slider-arrow-left').click();
  }
  if (event.key === 'ArrowRight') {
    document.querySelector('.w-slider-arrow-right').click();
  }
});

</script>

Les attributes

Aucun attribute nécessaire

Nom

Valeur

Aucun attribute nécessaire

Nom

Valeur

Nom

Valeur

Nom

Valeur

Nom

Valeur

Nom

Valeur

Nom

Valeur

Tuto

Template

Code source du script

<script>

document.addEventListener('keyup', function (event) {
  if (event.key === 'ArrowLeft') {
    document.querySelector('.w-slider-arrow-left').click();
  }
  if (event.key === 'ArrowRight') {
    document.querySelector('.w-slider-arrow-right').click();
  }
});

</script>