javascript - swiper tab switching. How can I make the swiper container move by clicking each button?
迷茫
迷茫 2017-06-14 10:54:16
0
2
775

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?...

迷茫
迷茫

业精于勤,荒于嬉;行成于思,毁于随。

reply all(2)
某草草

Horizontal scroll scroll .topnav_list

Ty80

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.

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template