Sliders Swiper dans des tabulations

Suite à une question de Stéphane sur le groupe francophone Oxygen, j'ai fait une recherche pour faire fonctionner différents sliders Swiper dans des tabulations. Par défaut, le changement de tabulation casse le fonctionnement des sliders.

L'astuce que j'ai trouvée ici, a juste besoin d'être adaptée à Oxygen. Le code JS peut être gardé tel quel (en remplaçant juste la classe .tabInput par .oxytab) et nous allons juste adapter dans Oxygen.

new Swiper('.swiper-container', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  }
});

let tabInputs = document.querySelectorAll('.oxy-tab');

tabInputs.forEach(function(input) {

  input.addEventListener('change', function() {
    let id = input.value;
    let thisSwiper = document.getElementById('swiper' + id);
    thisSwiper.swiper.update();
  });

});

Dans les tabulations nous allons rajouter un attribut "valeur" qui aura comme valeur une incrémentation en fonction du nombre de sliders (dans ce cas 1,2,3). Ensuite nous devrons changer l'ID du swiper-wrapper avec swiper1, swiper2, etc. Ainsi à chaque changement de tabulation, le slider sera mis à jour et fonctionnera correctement.

La structure de Swiper reste la même que sur ce tutoriel.

Vous pouvez voir ma démo sur cette page.