Swipe.js support for web clicks and digital navigation

Swipe.js is a sliding plugin for mobile, swipe with finger touch, and support left and right navigation, please visit a previous article about: Swipe.js.

But do not support the page version of the click Jump and digital navigation, these need to add yourself, before you originally wanted to use this in front-end development, and finally found no such function, recently I began to toss a bit, found that the original can also be used in the desktop version, just need to add some additional code. and support IE6. Support adaptive design, do not need jquery, suddenly feel good praise.

First add the path to the plugin, and then add the following JS code:

var mySwipe = Swipe(document.getElementById(‘mySwipe‘), {// startSlide: 4,auto: 3000,// continuous: true,// disableScroll: true,// stopPropagation: true,callback: function(index, element) {slideTab(index);}// transitionEnd: function(index, element) {}});//点击数字跳转到响应的面板var bullets = document.getElementById(‘pager‘).getElementsByTagName(‘em‘);for (var i=0; i < bullets.length; i++) {var elem = bullets[i];elem.setAttribute(‘data-tab‘, i);elem.onclick = function(){mySwipe.slide(parseInt(this.getAttribute(‘data-tab‘), 10), 500);}}//高亮点击的数字导航function slideTab(index){var i = bullets.length;while (i--) {bullets[i].className = bullets[i].className.replace(‘on‘,‘ ‘);}bullets[index].className = ‘on‘;};

Demos and Downloads

I've forked the project and added the above code to the demo document, which you can copy or download.

Demo address, demo Address II (mobile phone scan QR code below)

Swipe.js support for web clicks and digital navigation