Favicon BulgaWeb

Sliders Swiper dans des tabulations

Mis à jour le mercredi 17 mars 2021
Temps approximatif de lecture : 1 minute

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.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Suite à la monétisation des mes postes sur un site externe (https://oxyhowto.com/more_hows-categories/french/) sans mon autorisation, les postes sont uniquement visibles avec un compte.
Copyright © 2019 - 2023 Bulgaweb
 | 
Développé par BulgaWeb
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram