javascript - swiper tab switching. How can I make the swiper container move by clicking each button?

Question

swiper tab switching How can I make the swiper container move by clicking each button

For example, NetEase's top tab switching clicks each button, and the tab switching container will scroll (1: you can scroll left and right, and the content occupies the entire container,)

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

Answer 1

Horizontal scroll scroll .topnav_list

Answer 2

I made a DEMO: https://codepen.io/anon/pen/d...

It only implements basic functions, and the movement position is not very precise. For actual use, you need to adjust the movement amount yourself.

The principle is to bind a onClick listener to each .topnav_item. When an element is clicked, get the index of the element in topnav_list, and then shift .topnav_list to the left accordingly by width * index distance (not an exact value, need to be adjusted).

Some syntax of ES2015 is used in DEMO. Please pay attention to browser compatibility when using it in practice. The figure saves trouble by using jQuery’s .scrollLeft() method. You can implement one yourself in actual use.