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