javascript - changement d'onglet du swiper. Comment puis-je déplacer le conteneur du swiper en cliquant sur chaque bouton ?

Question

Changement d'onglet Swiper Cliquez sur chaque bouton pour faire bouger le conteneur Swiper

Par exemple, le changement d'onglet supérieur de NetEase clique sur chaque bouton et le conteneur de changement d'onglet défilera (1 : vous pouvez faire défiler vers la gauche et la droite, et le contenu occupe tout le conteneur,)

http://3g.163.com/touch/auto?...

Answer 1

Défilement horizontal .topnav_list

Answer 2

J'ai fait une DEMO : https://codepen.io/anon/pen/d...

Il ne met en œuvre que des fonctions de base et la position du mouvement n'est pas très précise. Pour une utilisation réelle, vous devez ajuster vous-même la quantité de mouvement.

Le principe est de décaler chaque .topnav_item 绑定一个 onClick 的 listener。当点击元素时，取得该元素在 topnav_list 中的 index，然后把 .topnav_list vers la gauche en conséquence de la largeur * de la distance d'index (pas une valeur exacte, elle doit être ajustée).

Certaines syntaxes d'ES2015 sont utilisées dans la DÉMO Vous devez faire attention à la compatibilité du navigateur lorsque vous l'utilisez dans la pratique. L'image évite les problèmes en utilisant la méthode .scrollLeft() de jQuery. Vous pouvez en implémenter une vous-même en utilisation réelle.