Slip.js can be used for moving the sliding banner, mobile end of the whole screen slide and other effects, the personal feel for the mobile side of the sliding banner better, will not conflict with iscroll.js, because it does not rely on any other JS library.
Html:
<!doctype html> ...<ScriptType="Text/javascript"Src="Slip.js" ></Script><Body> ...<DivId="Container" ><Divclass="Page page-1" ><ImgSrc="Img/1.png" ></Div><Divclass="Page Page-2" ><img src= "img/2.png" ></< Span class= "title" >div> <div class= "page page-3" ><img src= "img/3.png" ></div> << Span class= "title" >div class= "page page-4" ><< Span class= "title" >img src= "img/4.png" ></< Span class= "title" >div> </div> </ BODY>
Js:
var container = document.getElementById(‘container‘);
var pages = document.querySelectorAll(‘.page‘);
var slip = Slip(container, ‘y‘).webapp(pages);
Explanation:
Slip: Exposure to the global approach, as long as you introduce slip.js , you can get this practical method.
container: The container being slid, inside is each sliding page.
‘y‘: page swipe direction, you can also pass in ‘x‘ .
webapp: Sets the way the page is displayed as a full screen slide.
pages: A list of page elements.
Slip.js has a lot of powerful features, here is just a brief, detailed information see http://binnng.github.io/slip.js/docs/, source in http://binnng.github.io/slip.js/docs/slip.html.
Slip.js (moving side follows finger slide assembly, 0 dependent)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
