search

Home  >  Q&A  >  body text

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

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

迷茫迷茫2751 days ago802

reply all(2)I'll reply

  • 某草草

    某草草2017-06-14 10:56:16

    Horizontal scroll scroll .topnav_list

    reply
    0
  • PHP中文网

    PHP中文网2017-06-14 10:56:16

    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.

    reply
    0
  • Cancelreply