Can someone please explain how to create this special effect on Xiaomi Mi 4 promotional page?_html/css_WEB-ITnose

http://www.mi.com/mi4#fea-ten
The URL is above, which is the switch between black and white. You can also switch manually.
Thank you!

Reply to the discussion (solution)

Can’t have 2 pictures above and below?

Extract the code from the web page and make a demo code, which uses four pictures, mainly to calculate the width and height
Because the window of the demo code is relatively small, so the position of the drag button is upwards One (margin-top in style .mi4-content-feature-h .feature-float-control)

Extract the code on the web page and make a demonstration code, which uses four images Pictures are mainly used to calculate the width and height
Because the window of the demo code is relatively small, the position of the drag button is moved upward (margin-top in style.mi4-content-feature-h .feature-float-control )

The effect is very good, like it

http://img03.mifile.cn/webfile/images/2014/cn/goods/mi4/ma/fea-35. png
http://img03.mifile.cn/webfile/images/2014/cn/goods/mi4/ma/fea-37.png

It is indeed two pictures. The assembly skills on the 2nd floor are really strong

The examples are taken from the official website. Two pictures are the front of the black and white mobile phone, and the four pictures are the front and back of the black and white mobile phone. Both sides

http://img03.mifile.cn/webfile/images/2014/cn/goods/mi4/ma/fea-35.png
http://img03.mifile.cn/ webfile/images/2014/cn/goods/mi4/ma/fea-37.png
It is indeed two pictures. The assembly ability on the 2nd floor is really strong