├── img └── arrow.png ├── css ├── slideToucher.css └── demo.css ├── js ├── demo.js ├── slideToucher.js └── libs │ └── jquery-1.8.3.min.js ├── index.html └── README.md /img/arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Yuripetusko/slideToucher/HEAD/img/arrow.png -------------------------------------------------------------------------------- /css/slideToucher.css: -------------------------------------------------------------------------------- 1 | #slides { 2 | width:100%; 3 | height:100%; 4 | -webkit-transform: translate3d(0, 0, 0); 5 | -webkit-transition-timing-function: linear; 6 | -webkit-backface-visibility: hidden; 7 | -webkit-transform-style: preserve-3d; 8 | 9 | -moz-transform: translate3d(0, 0, 0); 10 | -moz-transition-timing-function: linear; 11 | -moz-backface-visibility: hidden; 12 | -moz-transform-style: preserve-3d; 13 | 14 | transform: translate3d(0, 0, 0); 15 | transition-timing-function: linear; 16 | backface-visibility: hidden; 17 | transform-style: preserve-3d; 18 | } 19 | 20 | .slide { 21 | width:100%; 22 | height:100%; 23 | display:inline-block; 24 | float:left; 25 | vertical-align:top; 26 | } 27 | 28 | .row { 29 | display:block; 30 | width:100%; 31 | height:100%; 32 | } -------------------------------------------------------------------------------- /js/demo.js: -------------------------------------------------------------------------------- 1 | $("document").ready(function(){ 2 | var hue = 0; 3 | Array.prototype.slice.call(document.querySelectorAll('.slide')).forEach(function(element, i) { 4 | var numberNode = document.createTextNode(i+1); 5 | var number = document.createElement("span"); 6 | number.appendChild(numberNode); 7 | element.appendChild(number); 8 | element.style.backgroundColor = 'hsla(' + hue + ', 75%, 50%, 0.5)'; 9 | hue += 222.5; 10 | }); 11 | 12 | $("body").prepend(""); 13 | 14 | setTimeout(function(){ 15 | $(".arrow").fadeOut(900); 16 | }, 3000); 17 | 18 | $("#slides").slideToucher({ 19 | vertical: true, 20 | horizontal: true 21 | }); 22 | }); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 || t |