Optimal solution for Webapp sliding of islider moving end

optimal solution for Webapp sliding of islider moving end

Islider is a performance-free, mobile device with no reliance on sliding components.
Islider's Project Address Https://github.com/BE-FE/iSlider
Islider's Example http://be-fe.github.io/iSlider/demo/

If you have a mobile phone next to you, you might as well look at our cool example:

If you feel like this project, or the project can help you, welcome to GitHub to US star, which will encourage us to continue to develop more fancy functions.

Named Islider is to salute like Iscroll, Islider is the best solution for moving sliding components. Now that the Web Carousel diagram has become pediatrics, many people will question the value of writing a mobile end again. In fact, there are many differences between the mobile end and the Web environment, user habits, behavior is also very different, and the mobile end of the browser, the application scene and the Web side also vary greatly. To sum up the difference: Mobile end user behavior habit difference (mobile end is more than touch events, pay more attention to the interaction between the finger and the touch screen mobile end screen (most of the mobile screen is less than the C end, in order to display the same content on a smaller screen, content sliding has become the user's operating habits) mobile end of multiple devices (ipad, iphone, Android phone, Android pad, and all of these devices in the same state, the speed of mobile device replacement, as well as mobile browser manufacturers to the standard support of the follow-up, including the unified WebKit Core browser

So islider, the fundamental problem is the content of the screen display, through the sliding operation to represent the previous page content or the next page content. And Islider is the most elegant way to solve, as much as possible to save memory, improve performance. Functional Islider Support: Picture and Dom two types slide, the type of picture is very suitable for the app,dom type of the reading graph class can be configured as a variety of WebApp custom event callback, you can slide, slide over, or slide to start binding your own event callback Configurable sliding animation, while achieving high performance, you can still specify some special advanced animation effects to complete your app,islider to provide 3d,flip,depth and other animation methods to enrich your sliding effect. Islider will help you deal with the screen rotation event, and you just have to consider how your DOM or picture will appear after the screen is rotated. Islider also has a few small features, such as sliding boundary decline, automatic sliding, vertical horizontal sliding can be configured.

And using Islider is also very easy to use, you only need to prepare a DOM node to store your slider:

<div id= "Canvas" ></div>

Then you need to prepare the data to be displayed, the data shown here are divided into two types, take the picture type of slider for example, you only need to prepare the image of the JSON data, the data format is as follows:

var list = [{
  height:475,
  width:400,
  content: ". /public/imgs/1.jpg ",
},{
  height:527,
  width:400,
  content:". /public/imgs/2.jpg ",
},{
  height:374,
  width:600,
  content:". /public/imgs/9.jpg "
}];

When called, you need to instantiate the Islider:

Islider = new Islider ({
  data:list,
  dom:document.getElementById ("Islider-wrapper"),
  Isvertical:true,
  islooping:true,
  isdebug:true,
  isautoplay:true,
  animatetype: ' 3d '
});

This allows you to run an instance of Islider, the meaning of some of the above parameters, you can see on the official website:

Http://be-fe.github.io/iSlider/iSlider dependency: Islider does not rely on any library or framework, you can easily use it in your own project, not with Zepto or jqmobi conflict. Volume size: Islider Compressed code 2KB, you can be very random packaging in your project. Performance: Islider with the help of mobile hardware acceleration, all animations reuse the DOM as much as possible, and use as little dom as possible to complete the rendering, support endless scrolling, and have a smooth experience with the fingers slipping quickly.

Issues and Bugs:

Welcome to Islider to make better suggestions and support, ask questions and bugs

Future:

Islider will also continue to develop and is expected to enrich the DOM type, enabling developers to build their apps with Islider. The graphics type will also support zooming in. The current version of Islider is 1.0-beta, and these features are expected to be added in the next release.

Reproduced from: http://www.qianduan.net/islider-yi-dong-duan-webapp-hua-dong-di-zui-you-jie-jue-fang-an.html