Why implement it yourself

Picture rotation, this is actually a rotten street function, everywhere; There are plenty of ready-made components online, so why implement them yourself? There are two main reasons

  • performance
  • customized

One is the online components of good and bad are intermingled, in THE PC run can also, to the mobile end, all kinds of cards. The other reason is because there are so many customized interactions to implement, so it’s still up to you!

Lift up two chestnuts

Before you masturbate code, take a look at other people’s components, is the so-called: do not see white do not see. The following are two common round – cast schemes on the Internet

  • Plan a

  • Scheme 2

Scheme one needs to slide quickly from one end to the other end when the rotation reaches the boundary, resulting in poor experience. The second scheme is optimized for boundary round casting, but it is still a little insufficient.

The original plan

Take a look at the schematic!

  • The container is dotted because the UL of this solution does not need to set the width and height
  • The container UL and element Li both use Translate3D and related attributes to take advantage of hardware acceleration
  • Boundary processing: Just move one element and you can achieve a loop, which is more cost-effective

Original demo

Only mobile events (Touch series) are handled, so to experience the full functionality, open the following example using a mobile browser or a PC browser that simulates the mobile version.

  • The base model
  • Scale model
  • The parallel mode

The code architecture

The above three demos represent three image rotation modes, of which BaseCarousel is the basis of the other two modes, and can also be said to be the basis of all expansion modes. Other types of banner rotation chart mode, are inherited from BaseCarousel, and then through rewriting, new custom logic and other ways to expand.

Making project

For more details and source code, please: click here