Swipe.js support for web clicks and digital navigation

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.