Comments (5)
Adding an alert inside the callback confirms it fires if the auto rotation happens, however once you swipe it yourself no callback occurs, and the auto rotation does not resume.
from swipe.
In onTouchStart, you are recording information in this.start. You use this information in onTouchMove and onTouchEnd. However, this.start is previously defined as an important function. When I modified the code to record information in this.tstart instead, the start() function remained untouched and everything worked.
onTouchStart: function(e) {
// cancel slideshow
clearTimeout(this.interval);
this.tstart = {
// get touch coordinates for delta calculations in onTouchMove
pageX: e.touches[0].pageX,
pageY: e.touches[0].pageY,
// set initial timestamp of touch sequence
time: Number( new Date() )
};
// used for testing first onTouchMove event
this.isScrolling = undefined;
// reset deltaX
this.deltaX = 0;
// set transition time to 0 for 1-to-1 touch movement
this.element.style.webkitTransitionDuration = 0;
},
onTouchMove: function(e) {
this.deltaX = e.touches[0].pageX - this.tstart.pageX;
// determine if scrolling test has run - one time test
if ( typeof this.isScrolling == 'undefined') {
this.isScrolling = !!( this.isScrolling || Math.abs(this.deltaX) < Math.abs(e.touches[0].pageY - this.tstart.pageY) );
}
// if user is not trying to scroll vertically
if (!this.isScrolling) {
// prevent native scrolling
e.preventDefault();
// increase resistance if first or last slide
this.deltaX =
this.deltaX /
( (!this.index && this.deltaX > 0 // if first slide and sliding left
|| this.index == this.length - 1 // or if last slide and sliding right
&& this.deltaX < 0 // and if sliding at all
) ?
( Math.abs(this.deltaX) / this.width + 1 ) // determine resistance level
: 1 ); // no resistance if false
// translate immediately 1-to-1
this.element.style.webkitTransform = 'translate3d(' + (this.deltaX - this.index * this.width) + 'px,0,0)';
}
},
onTouchEnd: function(e) {
// determine if slide attempt triggers next/prev slide
var isValidSlide =
Number(new Date()) - this.tstart.time < 250 // if slide duration is less than 250ms
&& Math.abs(this.deltaX) > 20 // and if slide amt is greater than 20px
|| Math.abs(this.deltaX) > this.width/2, // or if slide amt is greater than half the width
// determine if slide attempt is past start and end
isPastBounds =
!this.index && this.deltaX > 0 // if first slide and slide amt is greater than 0
|| this.index == this.length - 1 && this.deltaX < 0; // or if last slide and slide amt is less than 0
// if not scrolling vertically
if (!this.isScrolling) {
// call slide function with slide end value based on isValidSlide and isPastBounds tests
this.slide( this.index + ( isValidSlide && !isPastBounds ? (this.deltaX < 0 ? 1 : -1) : 0 ), this.speed );
}
}
Cheers.
from swipe.
sorry for the odd formatting, just look for all the tstarts
from swipe.
I just updated your comments so I could read them easier. I'm looking into it right now.
from swipe.
Yea I completely forgot that the start namespace was already in use. I am changing the start()
function to be renamed to begin()
.
from swipe.
Related Issues (20)
- How to display a partial view of the next slide? HOT 4
- 当只有两个滑动卡时,下滑出现bug
- How to adjust the height according to their own height when it is used for the whole page tab?
- i want text alert on click prev or next button...? HOT 1
- When i append div on document ready, My style is not applying. HOT 2
- Show multiple slides HOT 3
- Webpack 2 pull Jquery
- Ipad, iphione scroll problem
- vertical slides?
- Width calculation rounding - Edge browser
- Gaps between each slider item in latest Safari HOT 2
- FEATURE REQUEST: Run callback only if it’s on touch and not by function HOT 1
- Swipe does not work android mobile browser.
- Processing version of Swipe
- 切换后如何自动播放
- 调用slide方法后,自动滑动失效 HOT 1
- Pagination buttons and slideTo method go to a wrong slide.
- Extra space on left
- Can I use it with vue?
- Handle active index properly when dynamically prepending/lazy loading slides through the data array
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from swipe.