Virtually infinite loop-able horizontal carousel
License: MIT License
Virtually infinite loop-able horizontal carousel for desktop and mobile browsers.
Read more at cubiq.org
Gallery Demo: http://cubiq.org/dropbox/SwipeView/demo/gallery
eReader Demo: http://cubiq.org/dropbox/SwipeView/demo/ereader
Inline Demo: http://cubiq.org/dropbox/SwipeView/demo/inline
Screencast: http://www.youtube.com/watch?v=Hhes5JHs8jQ
LINE 187:
/(^|\s)swipeview-loading(\s|$)/.test(className) || (this.masterPages[i].className = !className ? 'swipeview-loading' : className + ' swipeview-loading');
^ Expected an assignment or function call and instead saw an expression.
Line 419:
/(^|\s)swipeview-active(\s|$)/.test(className) || (this.masterPages[this.currentMasterPage].className = !className ? 'swipeview-active' : className + ' swipeview-active');
^ Expected an assignment or function call and instead saw an expression.
Line 423:
/(^|\s)swipeview-loading(\s|$)/.test(className) || (this.masterPages[pageFlip].className = !className ? 'swipeview-loading' : className + ' swipeview-loading');
^ Expected an assignment or function call and instead saw an expression.
Hi. I am using JQM with Swipeview (inline) and it works great when viewed through Safari.
I have a problem when I launch the app from the homescreen. When I navigate away from the page holds the carousel and then navigate back to it. The carousel stops working. Can you help me understand why this might happen?
I have not customised the code in anyway just lifted it from the demo. I am however calling the plugin on
Many thanks in advance.
Wonderful tool and fast moving development. I am basing (updating, rather) a Zenphoto theme for iPhone on this. I'm still on v0.3, but this comment should apply to the new version as well.
I'm loading largish images which use almost every pixel of the retina display, and find that the current method of removing the "swipeview-loading" class as soon as the page is "flipped" and the IMG src is updated results in frequent glitches where the old image is still visible for a fraction of a second (often abnormally stretched since the dimensions may have changed), before the new one is downloaded and displayed. The solution I found was to have the masterPage class cleared only after image load. This is complicated by the generality of your newer versions (since it knows nothing of the content being paged through). I solved it by removing your class-clearing code, and adding my own, following the SwipeView creation:
var images=document.getElementsByTagName("img");
for(var i=0;i<images.length;i++) {
images[i].onload=function () {
this.parentNode.className='';
}
}
In the new v0.10, it looks like removing the class-clearing code from __flip and letting the user onflip callback handle clearing the swipeview-loading class after image load would work similarly. Since the page might contain multiple images, etc., I can't think of how to let swipeview do this itself and maintain the current generality. One idea to make this more straightforward would be to create public "setActive" and "setLoading" codes that the user can use in their custom callbacks. If a user flip event handler exists, it would be responsible for calling setActive after it updates the page contents. If not, your __flip handler does this itself.
Hi guys, i have a problem with swipeview.
i have two different carousels on portrait and landscape screens of ios application created with phonegap.
I buffered all images at once on both carousels and toggle them by media queries.
problem is when i switch orientation my application get crashed and in error report is caused due to memory leak.
i also remove resize() method and orientation change event for not interrupt anything on onorientation change but it still crashing application.
https://github.com/Rahulitsmca/SwipeView/blob/master/src/swipeview.js
thanks in advance
Any solution to hide the url bar on load?
Is there any way to slide only two elements instead of the 3 default?
The behaviour of orientationchange event isn't consistent; specifically, on many Android devices this event fires before orientation is actually updated, resulting in the wrong (opposite) size being detected. On some Android devices, it apparently doesn't fire at all.
Workaround I am using is to unregister SwipeView from listening to orientationchange, and manually call __resize on window resize. My recommendation would be to remove orientationchange detection from SwipeView completely, and just rely on window resize, which seems to give more reliable results.
After matching a part of the url with an element in json, I get an index of that particular slide.
The problem is calling gallery.goToPage() on that index...
It always seems to just load the second slide during normal execution but if I use the console, I can go directly to the slide using that function.
Ex: lets say the index is 31... it goes to slide num:2.
The only clue I have is that upcoming == "311" if my index is 31 which seems like a type error. This variable is set in gallery.onFlip();
All I need to do is call goToPage on load and have it execute properly.
code
// if slide alias is in thePath
var thePath = document.location.pathname
var firstSlideAlias = thePath.substring(thePath.lastIndexOf('/'), thePath.length);
//conforms to a path with an gallery or slide alias appended
if ( (thePath.match(/\//g)||[]).length === 5 ) {
if ( firstSlideAlias.length > 1 ) {
firstSlideAlias = firstSlideAlias.replace('/','');
for (var i in slides) {
if ( firstSlideAlias === slides[i].alias ) {
console.log(firstSlideAlias);
console.log(slides[i].alias);
slideIndex = i;
}
}
console.log(slides[slideIndex]);
console.log(slideIndex);
gallery.goToPage(slideIndex);
}
}
I'll try to explain this the best I can.
Currently some of the content in my SwipeView slider is wrapped in "< a >" tags. This causes SwipeView to not complete its flip whenever I am swiping through the content that is wrapped in "< a >" tags. I have to click again and release to get SwipeView to finish the flip. Any ideas on how to prevent this?
I changed iCarousel to SwipeView and the grid became looking properly.
But I've noticed some strange behaviour concerned with 2 interconnected methods in SwipeView:
1)- (NSInteger)numberOfItemsInSwipeView:(SwipeView *)swipeView;
2) - (UIView *)swipeView:(SwipeView *)swipeView viewForItemAtIndex:(NSInteger)index reusingView:(UIView *)view;
My problem relates to these methods are invoked twice. It looks like 2 subsequent [someTableView reloadData] (if it was in case of UITableView).
Before writing you I've checked all my code once again to be definitely sure. I do not confident if this second "reload" exactly need or it's a kind of a bug. Moreover I created a new clear project and added there your SwipeView and set 2 breakpoints in each of methods. Outcome: 2 invocations. Your Code sets number of Views in the grid and then creates each of view gradually. When the last view is ready, code "jumps" into numberOfItemsInSwipeView and performs all the work once again.
I'd be very appreciate for you If you could help me with that hindrance
I've setup SwipeView to autoplay using SetInterval and next() function. Once autoplay starts... I can't figure out what function to use to stop the autoplay. I tried creating a new function with this.directionX = 0 and this.x = 0 but that doesn't seem to work correctly. It makes the swipe reverse instead of stopping it. Any ideas or advice would be greatly appreciated.
Currently SwipeView assigns ID attributes to each element which is undesirable for pages with multiple SwipeView instances. Would you consider using class names instead? As a bonus allow the client to choose which class name to assign for each SwipeView.
I know, I know..... but we have been tasked with making a legacy app support IE 9.
SwipeView appears to load up the initial 3 pages, but then just infinitely loops those, rather than navigating thought the array of pages.
Is this something you have come across, or have any points where we could look at patching it?
its v 1.0
Cheers
Matt
Hi,
when used with PhoneGap, HTML formatting is broken after changing device orientation. (Android only, fine with iOS)
Here is the video:
http://www.youtube.com/watch?v=Q87_QRa2HJo
A bug happens on Android 2.3 with horizontal swiping. You can experience it on the horizontal demo (http://cubiq.org/dropbox/SwipeView/demo/inline/) as well. Swipe to page two, and then scroll the page vertically. This will show the first page while scrolling! Once you stop scrolling, it displays normally again. Obviously a bug in the browser, but I have been unable to find a fix/hack.
The effect is even more prevalent on other pages with more DOM elements than the demo page.
This was tested on a Samsung Galaxy S, Samsung Galaxy S2, HTC Desire, all with Android 2.3.
It does not happen on a Galaxy Nexus Android 4.0, nor Android 2.3 emulator.
During debugging of my webapp, I traced a memory leak to SwipeView code.
the cause of the leak is that customEvents array is not actually being cleared in the destroy method.
The reason is that customEvents is declared on the prototype, while in the destroy, the "this.customEvents = [];" runs on the instance object; it actually creates a new property on the instance object named customEvents that masks the same property on the prototype. The problem is that the this.customEvents.push happening before destroy() (= all of them) are adding references into the prototype and therefore are never being cleared.
The simplest solution, IMHO, is to hoist the customEvents property to the instance level (in the constructor); a bit less tangible, but more prudent. I would also hoist the other instance-level properties (currentMasterPage, x, page, pageIndex), if they did mean to act on the instance level.
I implemented SwipeView in a Cordova 3.5.0 project. All seems to be working fine, except on Android 4.2.2 there's a problem.
SwipeView detects the "transitionend" event on the Android native browser, but unfortunately this event is not implemented by this browser. "webkitTransitionend" is, however. After some googling I found that Modernizr had the same problems (for Android 4.1). They fixed it over here:
bpierre/vue@057c086
I propose the same solution for SwipeView:
var vendors = 'webkitT,t,MozT,msT,OT,t'.split(','),
Swipeview doesn't work when swiping out of container in inline example. Also doesn't work if Swipeview is placed in iframe and user swipes out of iframe.
Tested in Chrome Version 30.0.1599.101 m
with example:
http://cubiq.org/dropbox/SwipeView/demo/inline/
Also breaks on all Android browsers I've tested on.
Hey, any chance to get this working when swiping over an video element? I guess the
error on 214 line "this.wrapper.style"
When the swipeview wrapper has got a fixed width it's possible to span multiple pages with one swipe. But new content is not being loaded in this page so it remains empty.
This issue is not present in non-touch browsers since the mouse-drag is only registered inside the wrapper (it will stop moving once your cursor moves outside the wrapper).
I know this is a mobile lib, but it works good on chrome (but not at alll in firefox 8?)
When adding the jquery mobile lib after or before including SwipeView then the SwipeView does not properly animate (only tested with the inline demo) It says:
Uncaught TypeError: Cannot read property 'style' of undefined (line 349, SwipeView.__checkPosition)
(BTW On Android SwipeView works with jquery mobile)
this can be prevented via $(window).load(function() { /* swipview init code */ }) or what do you suggest?
Hi
Swipeview already provides public access for both page and pageIndex variables.
Currently the only way to know which page is flipped is to rely on the dataset.upcomingPageIndex of the masterPages. Will it be possible to make the pageFlip and pageFlipIndex vars of the __checkPosition method public to ease the use of this informations directly on the swipeview instance and not relying on the DOM ?
Thanks.
On some of our larger galleries i've noticed that master slide images from the first set are repeated on the next set of master slides. In some case the correct image loads after a few seconds but in many cases the image doesn't refresh at all. Has anyone else seen this issue with larger galleries?
From what I understand, SwipeView loads 3 master slides at a time and once a user swipes past the 3rd slide it fetches the next set. Is there a reason why the next set of slide are loaded on each swipe?
on this page drag thumbnail images below the main image
right click to kill this extremely annoying effect
On iPad, with "loop: false", when you drag past the first or last page and release your finger, the page instantly snaps back instead of smoothly animating back to its position.
The native swiper does smoothly animate back to its position, so it looks rather odd in an app.
When I add <script type="text/javascript" src="./js/jquery.mobile-1.2.0.js"></script> to the demo index.html, it starts throwing the following javascript exceptions:
TypeError: 'undefined' is not an object (evaluating 'this.masterPages[this.currentMasterPage].className')
TypeError: 'undefined' is not an object (evaluating 'gallery.masterPages[gallery.currentMasterPage].className')
It work fine if JQM is disabled.
Hi Matteo, please could you add a version tag so that I can submit your excellent work to cdnjs.com?
Here is a link to the rejected pull request:
Many thanks
Using Swipeview to create a touch-enabled carousel with 6 images. The order of the images jumps from 1, 2, to 6. First, second and last. I have not edited swipeview.js -- I think there may be something wrong with the js code that breaks when you change the number of slides.
this is a minor issue, which happened only when mouse move during the translate transition, if you set transition duration a bit longer, you could see this issue clearly.The cause is, newX is based on this.x, but during the transition, x value of slider is changing, but this.x is not updated.
Hi,
How to reproduce
iPhone 4, iOS 4.3.5, WiFi
open http://cubiq.org/dropbox/SwipeView/demo/ereader/ and you get an error:
Javascript Error on Line 59
http://cubiq.org/dropbox/SwipeView/demo/ereader/
Javascript execution exceeded timeout.
Hi, thanks for the script, it's awesome and works like a charm.
I would like to implement a function that would be able to pause() theSwipeView, and then resume it.
I don't know if it is already included into the lib or if it is planned ?
Basically I would like, at some point, to desactivate the swipe on my carousel ( because I need the touch events for doing some drag'n drop ), and later to reactivate it.
If it has not been made, how can I do it quickly ?
Thanks
What does this do? It's defaulted to false and doesn't order correctly. Doesn't when set to true.
In which cases do you actually want this set to false?
It's not bind touchEvent on windows 8 pad (intel).IE 10 has not ontouchstart event.I found that navigator.userAgent is different deskTop:"Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0; .NET4.0E; .NET4.0C; Tablet PC 2.0)",
pad:"Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0; Touch; .NET4.0E; .NET4.0C; Tablet PC 2.0; InfoPath.3)",I want to solve the problem in this way.Is there any othor solution?
in the example all the html code within the ' ' is in onle line. is there any way to put formated html code with indentation as an array element of the slides var or is that not possible. thanks for tips (i have no experience with javascript)
Swiping left and right is broken..
It would be cool if it was possible to add a small separation (2-5%) between pages. Because, if pages are full-screen, they rest against each other which doesn't look nice. I tried modifying the code myself but I'm not yet familiar enough with it.
this.wrapper.clientWidth in function refreshSize is 0 if I new a swipeview but the HTML DOM hasn't rendered.
such as fellow code:
this.$el.html("
<div id="swipeview">
</div>
How do I allow this page to zoom-in using ipad?
I set user-scalable=1 and max and initial scale to 5 and 1
But It's still can't zoom-in in ipad
Hi,
All works fine without jquery mobile. But as soon as I load the jquery moble script (the jquery.mobile-1.0.js, not the css file), the slide animation stagnates or have some strange delays.
I figured out, when the animation stagnates and I tap on the screen a second time, the animation continue correctly …
The Bug comes up on ios 5.0 (simulator and iphone). On ios 4.3 (simulator) it works fine.
I have a test project with this bug, if somebody need it...
In firefox I was having issues if the width of the wrapper was set as a percentage. Over time the content gets offset if the width of the wrapper is not exactly rounded to the exact pixel.
Wouldn't it be better if the wrapperWidth would be calculated using getBoundingClientRect() instead of clientWidth/clientHeight? getBoundingClientRect() returns the width in sub-pixel precision. It seems to have fixed my problem.
Can be reproduced in the project demo:
http://cubiq.org/dropbox/SwipeView/demo/gallery/
It take a few attempts, but if you drag the view past the threshold, then drag back just below the threshold (not all the way back), the page indices are updated but the shown view is still the same and is out of sync e.g. with the top indicators. I can already reproduce this every time and in our app this happens all the time by accident.
See screenshot, where the first image of the feed is shown, but the swipe indicator on the top highlights the last item:
Thanks!
I've seen that wrapper are 100% height and width.
Line 82 in 65c560f
The wrapper's content, i.e., masterpages, are absolute.
Line 91 in 65c560f
In my use case, I put some images set with width and height (like 100px) within #masterpages, and the wrapper's height is not stretched (0px maybe) in HTML,
All the content I put are not visible. I need to specify the wrapper height manually. That's inconvenient.
A quick fix for this may be:
div.style.cssText = cssVendor + 'transform:translateZ(0);position:absolute;top:0;height:100%;width:100%;left:' + i*100 + '%';
+ //overwrite absolute
+ if (i == -1) {
+ div.style.cssText = div.style.cssText + ';position:relative;'
+ }
if (!div.dataset) div.dataset = {};add below line 82
I have a slider on the first page that works flawlessly with swipeview initially but once the page goes beyond the viewport (not hiding on either sides) and if I go back to that page, the slider is gone. This also happens on the close button that closes the page. It's just not working anymore. I think swipeview ignores all my javascript that applies to the content inside swipeview?
I read your blog about clearing the old data and filling in with the new ones. Is there a way to prevent clearing my javascript? Thanks!
this plugin is total buggy on mac, when trying to swipe, it dosent work. try to sort it off.
hello, I copied your gallery demo to use in a small project and it turns out to be very slow on iphone and etc mobile phones. Wonder what's cause the serious performance problems? Can you improve it or give me some hint about it?
I change a little bit the css to view three slides at time (#30). It works perfect, until...
The Problem: It happen in two ways (although its maybe the same thing):
When a slide should load, well, it doesn't and the blank space is the only thing you see.
Not sure if its some problem with css or is because the way the .js work.
There is a way to load more slides at the page load and avoid loading one by one, or just a way of swiping without see the slides loading or not loading at all?
This is the demo with the problem: https://dl.dropbox.com/u/5700907/SCRO/swv_github/index.html
Snapshot here: https://dl.dropbox.com/u/5700907/SCRO/swv_github/img/snap_problem.png
We at VersionEye are working hard to keep up the quality of the bower's registry.
We just finished our initial analysis of the quality of the Bower.io registry:
7530 - registered packages, 224 of them doesnt exists anymore;
We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).
Sadly, your library cubiq/SwipeView is one of them.
Can you spare 15 minutes to help us to make Bower better?
Just add a new file bower.json and change attributes.
{
"name": "cubiq/SwipeView",
"version": "1.0.0",
"main": "path/to/main.css",
"description": "please add it",
"license": "Eclipse",
"ignore": [
".jshintrc",
"**/*.txt"
],
"dependencies": {
"<dependency_name>": "<semantic_version>",
"<dependency_name>": "<Local_folder>",
"<dependency_name>": "<package>"
},
"devDependencies": {
"<test-framework-name>": "<version>"
}
}
Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.
NB! Please validate your bower.json with jsonlint before commiting your updates.
Thank you!
Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!
Hi,
I would like to be able to extend the viewport, so that you can see a bit of the left masterpage and a bit of the right masterpage. Is this somehow possible?
Cheers
React
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
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
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.
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.