rstacruz / swipeshow Goto Github PK
View Code? Open in Web Editor NEWThe unassuming touch-enabled JavaScript slideshow
Home Page: http://ricostacruz.com/swipeshow
The unassuming touch-enabled JavaScript slideshow
Home Page: http://ricostacruz.com/swipeshow
Am I missing something or there isn't a specific method for this?
Is there a way to make the transition from last to first... or from first to third/fourth/fifth happen without sliding through the bypassed items?
basically a simple transition to the element, not a slide past every element until you get to the one you want?
if a slideshow has 10 elements, and you jump from 1 to 10, or when it hits 10 and goes back to 1, it will slide through 10 frames quickly and its not attractive (not as bad or noticeable when there's 3), especially when they are large (500px wide or more) frames
Trying to figure out how to use "onactivate" to update an element with the current index-number and also fetch the total index. Is this possible or do you need to add something to the code?
Like:
onactivate: function() {
document.getElementById("slide-counter").innerHTML = index + " / " + index_total;
}
Currently you need to give the slideshow div container height and width in pixels..If given in % then the slides do not show.
If you fix this issue then it can be used responsively. :)
Hi
I tried to use your plugin in multi-instances without any problem with jQuery only but the only presence of the mootools library (joomla 2.5 cms, loaded before jQuery) with implementation of all non conflict jQuery possible methods conducts to a non working page. It seems that the plugin is not correctly protected about libraries conflicts.
Have you made some test in this situation and what could be the solution?
Regards
Daniel
Is it possible to set height to 100% so picture have the correct size both in portrait and landscape ?
On 1 machine (out of 3) tested, in chrome, the auto pause on hover does not pause the presentation
Windows 7, most current version of chrome browser
any thoughts?
I would like to add a very simple feature that a lot of galleries have: that when I click on an image that it goes to the next slide.
When I set the $next to the whole slideshow I can click on it to get to the next slide. But unfortunately click gets also called when I swipe or drag which results in in a double next. Is there any trick that I could prevent this behavior?
When I enter % width for my .slideshow for some reason the slideshow disapears.
hi
when using the native browser in 4.4, sometimes the swiping behavior works; sometimes it does not.
are you aware of any issues/have fixes?
It would be nice to have the option to swipe up and down to do the same thing that currently works for left and right.
Hi,
It doesn't seem to want to swipe in Chrome on my samsung s4 cell/mobile.
Any ideas? Can you test it?
I am using it here: http://www.fineartpicturelight.com/technical/power_options
Hi,
Is it possible to use
onactivate: function(){}
To get the current active slide's attribute?
I tried using '$(this)' but it doesn't return anything:
onactivate: function(){
$(this).attr('class)
}
Having logged various variables to the console it appears that 'transitions' is returned as true in IE7 and IE8, when they do not support CSS transitions. I hacked this by forcing the plugin to use animate instead, but thought you'd like to know.
Suppose I want to add additional list items to the swipeshow. What's the BEST way to do it gracefully?
Ideally, there'd be a method or call the constructor's .swipeshow() method again.
What do you recommend?
for your HTML markup section (https://github.com/rstacruz/swipeshow#html-markup)
it looks like you broke from tradition. For most you're using a wrapping class of "slideshow", for the html-markup section you used "swipeshow", which is fine, if different from the rest of the examples, but in your description text above it your mind seems stuck between the two say, "or even .swideshow!" which is an amalgamation of the two.
(as a side note, in the css right below you're also using a selector of .swipeshow instead of the standard slideshow)
Looking forward to trying this out on my client's new site!
Touch swiping is working fine in Android, Windows Phone, and desktop (with mouse or touch), but the images are not being switched or animated on iOS devices (iOS 8+). Looking at your code, I found another -webkit- needed to be added in the setOffset function so mobile Safari can properly transform.
Current code (line 571):
function setOffset($el, left, speed) {
$el.data('swipeshow:left', left);
if (transitions) {
if (speed === 0) {
$el.css({ transform: translate(left, 0), transition: 'none' });
} else {
$el.css({ transform: translate(left, 0), transition: 'all '+speed+'ms ease' });
}
} else {
if (speed === 0) {
$el.css({left: left});
} else {
$el.animate({left: left}, speed);
}
}
Fixed for iOS device (if (transitions)
statement):
if (transitions) {
if (speed === 0) {
$el.css({ transform: translate(left, 0), "-webkit-transform": translate(left, 0), transition: 'none' });
} else {
$el.css({ transform: translate(left, 0), "-webkit-transform": translate(left, 0), transition: 'all '+speed+'ms ease' });
}
}
Other than this, Swipeshow's working great. Thanks for the resource!
EDIT: I just learned that jQuery 1.8+ does this for you (takes care of -moz, -webkit, and the like). Our site is using jQuery 1.7. This must explain why the issue has not come up before - and why you say your plugin requires jQuery 1.8+. Nevermind this issue!
Hello,
Was just using this up on a project, I'm currently doing a cross-browser test of our website, and found that it doesn't work on Opera? It only displays the first slide and doesn't change content. Am i missing something here?
I'm currently looking at the documentation/readme but it doesn't state any browser that it wouldn't be compatible with. If I'm missing something here, I'm sorry that I filed the issue.
I'm using your plugin to have the entire page be swipable, but when the page is viewed on a smaller window or device and the content in the slide gets too long, I can't vertically scroll.
Is there a fix for this I'm overlooking? Considering switching to a different plugin for this reason.
From Rico Mossesgeld: "Display: none hides it, but there's some flickering. Seen on mobile safari and chrome." "Seems to occur during slide animation, again despite display: none"
Hi, and compliments on a nice simple slider.
I am trying to make the slider responsive, with variable sized content.
Everything works well, but the height is really tricky.
Is it possible to somehow "make the slider the height of tallest image"?
It seems the slider needs a set height in the css, which is a bit tricky when the width (also css) is set to for example 100%.
Hope you understand the question :)
It may be a device-specific issue, but on the multiple occasions that I've used Swipeshow, it did not work on Nexus 4. Works fine on iPhone + Galaxies
I have a problem where calling "next()" nothing happens, but on calling next one more time the swipeshow swipes 2 slides at once. So it seems like the first event is not fired and then stacks up for the next call to next().
Im using the swipeshow inside an iFrame (Unfortunately needed becasue of the architecture)
Any idea as to why this is happening?
Is there is any way to stop the slideshow compleatly (not pause) after hover or after user swipes one slide.
Would be nice to have an option, possible to change at runtime, to just "reverse" the direction of the interaction.
This would be useful to applications that run in touch-screen computers where UI rotation changes at software level and the OS doesn't adapt.
Hi,
what would be the best way to have multiple sliders on a page with individual controls (prev, next, dots navigation, auto slides, even captions)?
If i have two or more sliders on a page, the prev and next buttons triggers all of the sliders.
Thanks in advance :)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.