Swipeview multiple
HTML
<script src="https://raw.github.com/cubiq/SwipeView/master/src/swipeview.js"></script>
<div class="scroller" id="scroll-wrapper">
</div>
CSS
.scroller { border-top: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1; width: 100%; height: 375px; }
.scroller .outer-scroll-item { position: relative; float: left; }
.scroller .scroll-item { float: left; -webkit-transform: scale3d(1.1,1.1,1.1) }
JavaScript
var SwipeView = (function (window, document) {
var dummyStyle = document.createElement('div').style,
vendor = (function () {
var vendors = 't,webkitT,MozT,msT,OT'.split(','),
t,
i = 0,
l = vendors.length;
for ( ; i < l; i++ ) {
t = vendors[i] + 'ransform';
if ( t in dummyStyle ) {
return vendors[i].substr(0, vendors[i].length - 1);
}
}
return false;
})(),
cssVendor = vendor ? '-' + vendor.toLowerCase() + '-' : '',
// Style properties
transform = prefixStyle('transform'),
transitionDuration = prefixStyle('transitionDuration'),
// Browser capabilities
has3d = prefixStyle('perspective') in dummyStyle,
hasTouch = 'ontouchstart' in window,
hasTransform = !!vendor,
hasTransitionEnd = prefixStyle('transition') in dummyStyle,
// Helpers
translateZ = has3d ? ' translateZ(0)' : '',
// Events
resizeEvent = 'onorientationchange' in window ? 'orientationchange' : 'resize',
startEvent = hasTouch ? 'touchstart' : 'mousedown',
moveEvent = hasTouch ? 'touchmove' : 'mousemove',
endEvent = hasTouch ? 'touchend' : 'mouseup',
cancelEvent = hasTouch ? 'touchcancel' : 'mouseup',
transitionEndEvent = (function () {
if ( vendor === false ) return false;
var transitionEnd = {
'' : 'transitionend',
'webkit' : 'webkitTransitionEnd',
'Moz' : 'transitionend',
'O' : 'oTransitionEnd',
'ms' : 'MSTransitionEnd'
};
return transitionEnd[vendor];
})(),
SwipeView = function (el, options) {
var i,
div,
className,
pageIndex;
this.wrapper = typeof el == 'string' ? document.querySelector(el) : el;
this.options = {
text: null,
numberOfPages: 3,
snapThreshold: null,
hastyPageFlip: false,
loop: true
};
// User defined options
for (i in options) this.options[i] = options[i];
this.wrapper.style.overflow = 'hidden';
this.wrapper.style.position = 'relative';
this.masterPages = [];
div =...