Author: | cubiq |
---|---|
Views Total: | 1,140 views |
Official Page: | Go to website |
Last Update: | January 3, 2017 |
License: | MIT |
Preview:

Description:
iscroll is a powerful, mobile touch-friendly javascript smooth scroller library for multiple purposes.
With iscroll, you can scroll any html elements vertically or horizontally with smooth effects on any devices like mobile, desktop, tablet, and much more. More examples can be found in the demos
folder.
Basic Usage (create an image carousel):
Load the iscroll.js in the html document.
<script type="text/javascript" src="iscroll.js"></script>
Create the html for an image carousel following the html structure like this:
<body onload="loaded()"> <div id="viewport"> <div id="wrapper"> <div id="scroller"> <div class="slide"> <div class="painting giotto"></div> </div> <div class="slide"> <div class="painting leonardo"></div> </div> <div class="slide"> <div class="painting gaugin"></div> </div> <div class="slide"> <div class="painting warhol"></div> </div> </div> </div> </div> <div id="indicator"> <div id="dotty"></div> </div> </body>
The CSS to style the image carousel.
#viewport { position: relative; width: 320px; height: 240px; margin: 0 auto; background: #444; overflow: hidden; } #wrapper { width: 200px; height: 240px; margin: 0 auto; } #scroller { position: absolute; z-index: 1; -webkit-tap-highlight-color: rgba(0,0,0,0); width: 800px; height: 240px; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; -o-text-size-adjust: none; text-size-adjust: none; background-color: #444; } .slide { width: 200px; height: 240px; float: left; } .painting { width: 140px; height: 200px; border-radius: 10px; margin: 20px auto; border: 1px solid #000; box-shadow: inset 2px 2px 6px rgba(255,255,255,0.6), inset -2px -2px 6px rgba(0,0,0,0.6), 0 1px 8px rgba(0,0,0,0.8); } .giotto { background: url(giotto.jpg); } .leonardo { background: url(leonardo.jpg); } .gaugin { background: url(gaugin.jpg); } .warhol { background: url(warhol.jpg); } #indicator { position: relative; width: 110px; height: 20px; margin: 10px auto; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAUBAMAAABohZD3AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QUGCDYztyDUJgAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAGFBMVEUAAADNzc3Nzc3Nzc3Nzc3Nzc3Nzc3///8aWwwLAAAABnRSTlMAX5Ks3/nRD0HIAAAAAWJLR0QHFmGI6wAAAFtJREFUGFdjYGBgEHYNMWRAAJE0IHCEc5nSwEABxleD8JOgXMY0KBCA8FlgfAcIXwzGT4TwzWD8ZAjfDcZPgfDDYPxU7Hx09ejmoduH7h5096L7B8O/6OGBGl4APYg8TQ0XAScAAAAASUVORK5CYII=); } #dotty { position: absolute; width: 20px; height: 20px; border-radius: 10px; background: #777; }
The javascript to initialize the image carousel.
<script type="text/javascript"> var myScroll; function loaded () { myScroll = new IScroll('#wrapper', { scrollX: true, scrollY: false, momentum: false, snap: true, snapSpeed: 400, keyBindings: true, indicators: { el: document.getElementById('indicator'), resize: false } }); } document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); </script>
Changelog:
01/03/2017
- Bugfix