Swiper est la bibliothèque JavaScript qui alimente chaque carrousel d'Elementor : le Carrousel d'images, le Carrousel multimédia, Carrousel de témoignage, Carrousel de boucle« , et chaque tiers » Widget carrousel Elementor vous avez installé Ce n'est pas une fonctionnalité Elementor C'est une bibliothèque de curseurs open-source qu'Elementor regroupe.
Sachant que cela change la façon dont vous déboguez un carrousel cassé Lorsqu'un curseur cesse de fonctionner, le problème n'est presque jamais le widget C'est que Swiper n'a pas chargé, n'a pas initialisé ou n'a pas initialisé avant que son conteneur ait une largeur.
Correction rapide : le curseur a cessé de fonctionner après une mise à jour du plugin
Si vous êtes ici parce qu'un carrousel en activité est mort subitement, essayez ceci avant de lire autre chose :
- Ouvrez votre plugin de mise en cache ou d'optimisation.
- Trouver les paramètres JavaScript : Combine JS, Defer JS, Delay JS.
- Désactivez les trois Effacez le cache Rechargez la page.
Si le carrousel revient, l'optimisation JS l'a rompu, et le correctif est une exclusion plutôt que de laisser l'optimisation. Exclusions exactes plus bas.
Ce que fait réellement Swiper
Trois éléments imbriqués Un conteneur, un emballage à l'intérieur de celui-ci, et glisse à l'intérieur de celui-ci Swiper lit la largeur du conteneur, calcule combien déplacer l'emballage pour chaque diapositive, et applique une transformée CSS sur l'emballage Les diapositives ne bougent jamais individuellement ; toute la bande glisse sous une fenêtre.
C'est pourquoi deux catégories de bugs dominent :
Le script n'a pas fonctionné. Rien n'initialise, donc vous voyez toutes les diapositives empilées ou en rangée sans interaction Le CSS de Swiper est généralement toujours là, il semble donc à moitié stylé plutôt que clairement cassé.
Le conteneur n'avait aucune largeur lorsqu'il mesurait. Swiper calculé contre zéro, donc les diapositives se chevauchent, s'assoient à la mauvaise taille ou la piste saute. C'est le bug de la languette et de l'accordéon : un carrousel à l'intérieur d'un panneau caché se mesure tout en étant caché.
Les cinq choses qui brisent les carrousels Elementor
1. combinaison et report JavaScript
La cause la plus fréquente de loin.
Swiper doit être défini avant l'exécution du code d'initialisation en ligne. La combinaison des fichiers de réordonnances JS. Reporter l'exécution au-delà de l'appel en ligne. Retarder JS maintient la bibliothèque jusqu'à l'interaction de l'utilisateur, date à laquelle l'initialisation a déjà été déclenchée et a échoué.
Ouvrez la console de votre navigateur Si vous voyez Swiper is not defined ou Cannot read properties of undefined: c'est votre problème.
Correction: excluez les poignées de balayage de l'optimisation plutôt que de la désactiver en gros. Dans le cache LiteSpeed sous Optimisation des pages → Paramètres JS. Ajouter :
swiper
elementor-frontend
jquery-coreUne chose que les gens manquent sur LiteSpeed : il existe des champs d'exclusion distincts, et Le mode invité a le sien. Si vous remplissez seulement la case principale JS Exclut, les utilisateurs connectés voient un carrousel en état de marche et les visiteurs déconnectés ne le font pas, ce qui est exactement le bug qui survit aux tests, car vous êtes connecté pendant que vous testez Mettez les mêmes exclusions dans le champ Mode invité.
WP Rocket : Optimisation des fichiers → Fichiers JavaScript exclus, plus les mêmes chaînes sous Exécution JavaScript retardée Autoptimise : Extra → Exclure les scripts de Autoptimize.
2. Carrousel à l'intérieur d'un conteneur caché
Un carrousel dans un onglet, un accordéon ou un panneau hors toile s'initialise lorsque le panneau l'est display: none. Largeur se lit comme zéro, et les mathématiques sont fausses dès la première image Ouvrez l'onglet et vous obtenez des diapositives qui se chevauchent ou une piste qui ne bougera pas.
Correction: la plupart des widgets exposent un paramètre de” d'“observer Allumez-le et Swiper regarde les changements de taille et les recalculs Si le vôtre ne le fait pas, mettez le carrousel dans le premier onglet, qui est visible en charge.
3. mode boucle avec trop peu de diapositives
La boucle fonctionne en clonant des diapositives pour simuler le retournement. Il a besoin d'au moins deux fois le nombre de diapositives par vue pour avoir suffisamment de clone. Quatre diapositives à trois par vue produisent un saut visible, des espaces vides ou une piste qui s'arrête à mi-chemin.
Correction: ajoutez des diapositives ou désactivez la boucle. Il n'y a pas de paramètre qui facilite une boucle courte.
4. Deux versions Swiper sur une seule page
Elementor regroupe une version ; certains addons regroupent les leurs Les deux enregistrent le même global Celui qui charge la seconde gagne, et si un widget a été construit contre une API différente, il se brise, souvent avec une erreur sur une méthode qui n'existe pas.
Correction: dans la console, cours Swiper.version. Désactivez ensuite les addons un à la fois jusqu'à ce qu'il cesse de changer Les plugins bien élevés réutilisent la copie d'Elementor plutôt que d'expédier la leur. La comparaison des plugins de carrousel note lesquels font.
5. Chargement paresseux combattant le curseur
Le chargement paresseux d'image agressif, en particulier un plugin de chargement paresseux séparé au-dessus de celui du thème, peut laisser les images de diapositives à hauteur nulle jusqu'à ce qu'elles défilent jusqu'à ce qu'elles ne défilent jamais en vue, car elles sont sur une piste horizontale Résultat : un carrousel de boîtes vides.
Correction: excluez la classe d'image du carrousel du plugin de chargement paresseux, ou définissez la largeur et la hauteur explicites sur les images afin que les boîtes réservent de l'espace. Carrousels vidéo frappez le plus fort, car chaque diapositive hors écran porte un lecteur ainsi qu'une image.
Comment vérifier si Swiper chargé
Trente secondes, et il vous indique quelle moitié du problème vous avez.
- Ouvrez la page avec le carrousel cassé.
- Ouvrez la console du navigateur (F12, ou cliquez avec le bouton droit de la souris → Inspecter → Console).
- Type
typeof Swiperet appuyez sur Entrée.
"function" signifie la bibliothèque chargée, votre problème est donc l'initialisation : regardez les conteneurs cachés ou les paramètres de boucle. "undefined" signifie qu'il n'est jamais arrivé, et la cause est l'optimisation JS ou un script qui a échoué plus tôt dans la chaîne Faites défiler vers le haut dans la console pour la première erreur rouge, pas la dernière ; les erreurs ultérieures sont généralement des conséquences de la première.
Paramètres de swiper importants dans Elementor
La plupart des widgets les exposent sous Paramètres du carrousel, parfois avec des étiquettes différentes :
- Diapositives par vue: combien sont visibles ; c'est le seul réglage qui sépare un carrousel d'un curseur. Réglez par point d'arrêt, toujours.
- Diapositives à faire défiler: combien d'avance par clic. Définir cela égal aux diapositives à la vue vous donne une radiomessagerie de type page ; le définir sur 1 donne une sensation continue.
- Vitesse: durée de transition en ms. 300 à 500 pour la norme, plus lente pour la 3 D.
- Retard de lecture automatique: pause sur chaque diapositive Réglé sur 0 et il devient un chapiteau[traduction], c'est ainsi que le Widget Logo Slider est généralement configuré.
- Boucle: enveloppe infinie. Nécessite suffisamment de diapositives, comme ci-dessus.
- Hauteur automatique: conteneur correspond à la plus haute diapositive visible Utile pour le texte inégal, et il introduit une animation de hauteur qui peut paraître sautillante, donc cela vaut la peine d'être testé plutôt que de supposer.
- Diapositives centrées: la diapositive active se trouve au centre plutôt que de rincer vers la gauche. Nécessaire pour que le flux de couverture ait l’air droit.
Où ceux-ci apparaissent dans le gratuit Widget Carrousel d'images: la procédure pas à pas du carrousel d'images a les captures d'écran du panneau.
Faut-il charger son propre Swiper ?
Non, dans presque tous les cas La copie d'Elementor est déjà sur la page chaque fois qu'un widget de carrousel est présent, et l'ajout d'un second provoque le conflit de version ci-dessus.
L'exception est un curseur personnalisé sur une page sans widget carrousel Elementor du tout Alors le Swiper d'Elementor n'est pas mis en file d'attente et vous avez besoin du vôtre Enqueue it conditionnellement, sur ce modèle seulement, pour ne pas réintroduire le conflit partout ailleurs.
Questions fréquemment posées
Qu'est-ce que Swiper dans Elementor ?
Swiper est la bibliothèque de curseurs JavaScript open source qu'Elementor utilise pour tous ses widgets de carrousel et de curseur Elementor le regroupe et le met en file d'attente chaque fois qu'un widget de carrousel apparaît sur la page La plupart des addons de carrousel Elementor tiers utilisent la même copie plutôt que d'expédier la leur.
Pourquoi mon curseur Elementor Swiper ne fonctionne pas ?
Neuf fois sur dix, c'est l'optimisation JavaScript à partir d'un plugin de mise en cache : combinez, reportez ou retardez JS en réorganisant les scripts afin que Swiper ne soit pas défini lorsque le code d'initialisation s'exécute. Désactivez ces trois-là et rechargez. Si le curseur revient, ajoutez swiper, elementor-frontend et jquery-core aux exclusions JS du plugin au lieu de laisser l'optimisation désactivée.
Comment réparer “Swiper n'est pas défini” ?
La bibliothèque ne s'est pas chargée avant l'exécution du code d'initialisation Excluez swiper de JS combinant, reportant et retardant votre plugin de cache Sur LiteSpeed, ajoutez les exclusions au champ Mode invité ainsi qu'au principal, sinon cela fonctionne pour les utilisateurs connectés et les pauses pour les visiteurs.
Quelle version Swiper utilise Elementor ?
Il change avec les versions d'Elementor Vérifiez-le sur n'importe quelle page avec un carrousel en ouvrant la console et en courant Swiper.version. Si cela renvoie un nombre différent de celui auquel vous vous attendez, un addon charge sa propre copie et remplace celle d'Elementor.
Pourquoi mes diapositives se chevauchent-elles ou s'empilent-elles les unes sur les autres ?
Swiper a mesuré le conteneur à une largeur nulle, généralement parce que le carrousel se trouve à l'intérieur d'une languette cachée, d'un accordéon ou d'une fenêtre contextuelle à la charge de la page Activer le paramètre de l'observateur pour qu'il recalcule lorsque le conteneur devient visible, ou déplacer le carrousel sur un panneau ouvert par défaut.
Pourquoi mon carrousel fonctionne-t-il lorsqu'il est connecté mais pas pour les visiteurs ?
Mise en cache. Les utilisateurs connectés contournent généralement le cache et obtiennent des scripts non optimisés, de sorte que le curseur fonctionne Les visiteurs obtiennent la version mise en cache, combinée et différée et elle se brise Testez dans une fenêtre privée et recherchez une liste d'invités ou d'exclusion non authentifiée distincte dans votre plugin de cache.
Si c'est encore cassé
Travailler dans cet ordre : contrôle de la console en premier (typeof Swiper), puis cache exclusions, puis désactiver addons un à la fois dans une copie de mise en scène Cette séquence trouve la cause en moins de dix minutes pour presque chaque cas.
Des dessins importés via le Constructeur de widgets utilisez la même version Swiper que les widgets d'origine, ces correctifs s'appliquent donc également à eux. Le page de tarification couvre lequel des vingt a besoin d'une licence.
Si vous préférez partir de quelque chose de connu-bon, chaque widget de carrousel sur le Widgets de carrousel d'éléments page est livré avec les poignées de script sécurisées par exclusion documentées, et le Guide du carrousel en boucle couvre la variante de requête dynamique des mêmes problèmes Si vous choisissez un widget plutôt que d'en corriger un, la panne gratuite du widget du carrousel et le vingt modèles de curseurs sont les deux endroits pour commencer.
