Swipe is the most accurate touch slider.

Hi! I'm working on a mobile html5 app for my company and have found your swipe script the absolute best.

There seems to be one problem though. I'm using Jquery mobile and the swipe function won't work so good. I have noticed the problem may have something to do with the display:block.

For example:

This code won't work, it only shows the first pic and nothing more:

<div style='display:block'><img src="img/1.jpg" width="100%"></div>
<div style='display:none'><img src="img/2.jpg" width="100%"></div>
<div style='display:none'><img src="img/3.jpg" width="100%"></div>

But if i set the other div to display:block also, it will work. But when the page loads that divs "flashes" by. And thats not so pretty.

Like this:

<div style='display:block'><img src="img/1.jpg" width="100%"></div>
<div style='display:block'><img src="img/2.jpg" width="100%"></div>
<div style='display:none'><img src="img/3.jpg" width="100%"></div>

Any ideas of why?

Thank you for your great work.

I’m trying to put iframe player from YouTube and Vimeo but SwipeJS behaves very strange when you put iframes as content inside slides.

• it seems like iframe is catching all touch events so only way you can swipe left/right is when you touch area outside iframe
• YouTube player acts very strange in a way that it doesn’t show iframe content but when you tap on empty area player activates and upon pausing video everything shows correctly

I’ve tried with their respective JS APIs but, as with iframes, they’re also very buggy and "beta-ish" so support is not standardized across platforms.

The circular option can be use for swiping always forward. When you reach the end, you go back to the first sliding in the same direction, so the slider seems endless.

I could not do this in the no transition fallback, though, because it would mean manipulating the dom (actually changing the order of the element in the list and recalculating indexes..).

Tell me what you think, if I need to change something, etc.

Start() and Stop()

This allows easier manipulation from outside of the plugin.

For example, a pause on a hover event is now simple: $('.swipe').hover(function() { $(this).data('Swipe').stop(); }, function() { $(this).data('Swipe').start(); });

Slideshow Resume

Previously, the slideshow would no longer cycle automatically after touch interaction.

Added paused variable to maintain state from stop() API call

This should close issues #341, #322, #316, #242

I am creating a feature on a site that has several animations on each slide. The library I am using is GSAP, green sock. Long story short I got all my animations dialed in and when I integrated swipe js the elements within the slide container jump all over the place. It swipes left and right and that works fine but if a slide that I swipe to contains any animations that particular slide goes haywire. This only happens when a slide contains animations.

Has this happened to any one?

I set it up to auto slide. and when i click a button with slide function it seems that the first duration i set overrides the duration in slide(index, duration)

Isn't there a pause function?

Hi, Brad.

I'm a web designer for Carnegie Mellon University. Thanks for Swipe. We used it for the web version of what we call the "brag book." It's a mini-book containing the unique accomplishments of our students, alumni and faculty.

Check it out: www.cmu.edu/brag

It's responsive and looks great on most devices. Unfortunately, it crashes when changing orientation on iOS. Have you heard of this happening for other people? Do you know what we could do to fix it?

Thanks! Steve

I'm using Swipe2 on the following page: http://www.greeleytribune.com/News/ and it works great with just about every important browser except for IE8 & IE9. In those two browsers, the autoscroll stops after the 2nd slide. I'm not seeing any errors in the console and I can advance to the next slide with next(). My code needs some refactoring, but I've even tried a barebones implementation and have had no luck.

I know that the focus of Swipe is not IE, but Swipe2 says that it does support IE. So, just wondering if anyone else has run into this issue or perhaps Swipe2 supports IE with the exception that the autoscroll doesn't work.

Thanks!

Sorry i do not know what version of Android this is, but it is a very new phone.

The demo page, swipejs.com , does not work with the swipe gesture. Previous and next do work.

If you swipe very quickly several times it seems like the transition end event doesn't get fired (assuming because the actual transition doesn't fire?). This can be seen in the example below (mobile safari doesn't seem to like jsfiddle), everytime the callback is called we prepend to the list with the index. Press on the next link slowly and you see all callbacks, press quickly and you see we miss some indexes:

http://jsfiddle.net/4a2yy/3/

A hacky workaround is to call the callback at the end of the swipe function. I did this in the demo below, calling it within a setTimeout as otherwise it effects how smooth the transition appears in mobile safari.

http://jsfiddle.net/VecTR/9/

Windows handles events in a other way. Mouse, touch and pen get merged. Because of a other structure in the events swipe.js does not work for win8 (ie10).

Added extra checks in the code for win8, if ie10, handle events in a other way.

https://codepen.io/guyr989/pen/OJNwJmy

Hey I am using version 5. I know you are no longer supporting it but I've looked everywhere and tried a lot of different things. I have this huge space on the left(using rtl) on desktop. Wierdly enough it wokrs perfectly on codepen but if you copy the files to your local machine than you can see it. (on the first time on codepen it may replicate as well).

Hi there

Looking for a solid Slider option for my Processing project, I found Swipe and thought it would be my best option. So I kind of ported it, in its simplest form, to Processing, the Graphic Programming language for Artists and Designers

You'll find it here https://github.com/rich-gg/PSwipe

The purpose of this post is not to advertise but to ask if what I've done is ok for you and if I can keep it on in GitHub

Congratulation for Swipe, it is really nice rich

Swiping right/left does not work on android while it works on iOS devices. When i run my application on iOS devices, i am able to swipe and also auto slide works well but when it comes to android only auto slides works and not swipe events. Its a Hybrid application and uses same JS for both the devices. Please help me out with the issue.

I'm pretty sure it was working on older versions of Safari, but I've recently found a bug where each image (slider/swipe item) is not loading the next image until the previous one is off the screen and causing a gap between images. This happens after 2-3 clicks on the next() slide.

It's tricky to explain so I've recorded a quick screencast to demonstrate: https://www.dropbox.com/s/hwbi16481ygmb16/swipe-safari-issue.mov?dl=0

All other browsers are working fine and wondering if anyone else is having the same issue.

macOS: 10.13.2 Safari: 11.0.2 Swipe: 2.0.0

const slider = document.getElementsByClassName('slider')
for (var i = 0; i < slider.length; i++) {

	const sliderCount = slider[i].dataset.moduleCount
	const prev = document.querySelector('.slider__prev-' + sliderCount)
	const next = document.querySelector('.slider__next-' + sliderCount)
	const swipe = document.querySelector('.swipe-' + sliderCount)

	window.mySwipe = new Swipe(swipe, {
		startSlide: 0,
		speed: parseInt(swipe.dataset.speed),
		auto: parseInt(swipe.dataset.delay),
		draggable: true,
		continuous: true,
		disableScroll: false,
		stopPropagation: false,
		callback: function (index, elem, dir) {},
		transitionEnd: function (index, elem) {}
	})

	prev.onclick = mySwipe.prev
	next.onclick = mySwipe.next

	if (mySwipe.getNumSlides() === 1) {
		prev.classList.add('hide')
		next.classList.add('hide')
	}
}

Any help would be appreciated.

The width calculation of the parent of swipe-element creates an issue wherein the last swipe-element does not display on higher resolutions 1920x1080. On lower resolution this problem does not seem to occur.

The issue being with the Math.round for calculating the width of the parent.

For example I'm displaying 63 images in the swipe inside modal, the width is 76185px in Chrome and in Edge is 76185.69px but the last image does not display, if I go and increase the width by one pixel the image display. This does not occur for the cases only for some only in Edge browser.