wilto/dynamic-carousel

A carousel plugin built for responsive layouts. There are many like it, but this one is mine.

dynamic-carousel's Issues

New master release not working

Hi Matt,

I've just downloaded the new master (ala Sep 10) and it doesn't appear to be working at all.

I dropped the JS straight into my dev and couldn't get it working. After much head scratching (I don't have dandruff!) I thought I'd better take a look at your demo again and that doesn't appear to be working either. Can't actually navigate through any of the slides.

Any ideas?

P.S. Congrats on the re-launch of The Boston Globe. It looks great and can't wait to delve a bit deeper. Good work!

Richard

addNav controls not working in IE7+error warning

Hi, sorry if I've missed something, but I still don't think this plugin works in IE7 with the generated prev/next links, and I'm getting the js errors :(

IE7 adjRounding Issues

I have a carousel with 3 slides, set to 100%.

In IE7, I am experiencing problems which is causing the second slide to not appear leaving just the background of the slider container.

After about ~12 hours, I have narrowed down the problem to the adjRounding function.

Here are the calculations through the function:

When clicking next on the first slide:

diff: 2424 i: 0 left: 0
diff: 2424 i: 1 left: 2424
diff: 2424 i: 2 left: 4848

When clicking next on the second slide:

diff: 1201 i: 0 left: 0
diff: 1201 i: 1 left: 1201
diff: 1201 i: 2 left: 2402

When clicking prev on the third slide:

diff: 11 i: 0 left: 0
diff: 11 i: 1 left: 11
diff: 11 i: 2 left: 22

When clicking prev on the second slide:

diff: 1201 i: 0 left: 0
diff: 1201 i: 1 left: 1201
diff: 1201 i: 2 left: 2402

Can haz online demo?

An online demo would be nice. Could be hosted on GitHub Pages, or not.

Mo’ Better-er Swiping

So, now that we have a cool drag-and-snap thing going on, the next step is declunkifying (a word) the animations. The issue here is that I’m using margin-left which—while easy to deal with in terms of calculation and styling—means everything in the slider is being redrawn constantly whenever the value changes.

The plan is to swap this for CSS transforms where possible (falling back to negative margins in browsers that don’t support transforms), so we can take advantage of hardware acceleration. I’ve done a little testing and it makes a very noticeable difference, but it’s going to require some tweaking to how I’m calculating things. I have a hunch this may address the WebKit rounding bug some people are seeing, as well.

Multiple carousels, addNav

I'm running into problems with multiple sliders on a page, all using the addNav parameter. All sliders except the last one on the page jump forward (the number of slides skipped depends on the number of sliders on the page). Anyone know why this is happening?

I've edited the demo version to re-create the problem i'm getting...

Example 1: Using 3 sliders on a page
http://matthewbranthwaite.co.uk/projects/responsive/example1.html

Issues:

• First slider - Click next and it jumps to slide 4
• Second slider - Click next andit jumps to to slide 3
• Third slider - works fine

Example 2: Using 4 sliders on a page
http://matthewbranthwaite.co.uk/projects/responsive/example2.html

Issues:

• First slider - Click next and it jumps to slide 5
• Second slider - Click next andit jumps to to slide 4
• Third slider - Click next and it jumps to slide 3
• Fourth slider - works fine

Any help appreciated,

Cheers,
Matt

Pagination Not Working

Latest commit fd9af96 appears to have re-enabled the core next/prev naviation, but pagination still appears to be disabled. I'm testing the demo.html file with the second example (pagination both numbered and icon-based don't affect the carousel).

Drupal module

I'd love to see this made up as a module for Drupal. LOVE IT.

Multiple carousels, single nav buttons

Hi

I've got multiple carousels that I'd like to control using the same links (.next, .prev).

Anyway I can achieve this easily?

Thanks

Continuous Cycle?

As you click through each one, is there a way to enable it to cycle back around to the first one?

Version number?

Hello,

Thank you so much for sharing code! I really appreciate it!!! I have yet to find a carousel that is as simple and light weight as your code is.

My question:

Would it be possible to have a version number to your plugin?

I don't know about others, but for me, being able to check version numbers would be very helpful for when it comes to maintaining local versions of this plugin. :)

I typically name my plugins:

jquery.plug-in-name-version.number.js

So, for yours, if you had a version number, I would do this:

jquery.dynamic-carousel-0.2.1.min.js

I can't find official docs, but I think there's official guidelines/recommendations for jQuery naming conventions and such.

Anyway, love your plugin! Thanks so much!!!!

Webkit Mobile offset issue

Hi and thanks for making this plugin - I heard about it via @beep's RWD book, and I've been using it in a few projects since. I've run into a bit of a weird issue, and only on the mobile webkit browsers that I've used for testing (Safari on iOS 4.3.5, stock browser on Android 2.2). On slideshows of a certain length the offset seems to shove the images too far to the left. That is, you can see a bit of the next image start to peek out. This offset seems to increase the further into the images you go, so that by the end of the slideshow you've got a noticeable column peeking out on the right side of the current image. Now, there doesn't seem to be a pattern as far as I could discern. Here's four test links I set up:

5 images, no issues
11 images, offset issue
15 images, offset issue
16 images, no issues

All the images are the same size (1024x486). Again, the issue doesn't seem to show up on desktop browsers, only on the two webkit mobile browsers that I've been testing against.

IE 7 Error

By clicking in the next button in http://responsivewebdesign.com/robot I get the next message:

Line: 19
Error: Unable to get value of the property 'match': object is null or undefined

Fade

Loving this, such a slick solution to the responsive carousel problem.

I'd be interested to know if the capability is there to 'crossfade' image without them sliding?

Thanks

No animation in IE in absolutely positioned container

I tested in a Virtual Machine on my Mac, in IE8 and IE9.

Enhancement

Wilto / Dynamic-Carousel -> Wilto Carousel

Rounding issue in Opera

Opera seems to round up when the number of slides isn't cleanly divisible by 100. For example, with three slides in place, each next/previous event seems to move the slider element by 34%.

Actually… Next/prev not updating at all.

Huh.

z-index weirdness with layered slideshow controls

This may have a lot more to do with the fact that I threw this page together in a few hours, but I sort of think this is a bug. Check out http://1023columbus.com (a totally incomplete teaser site for the coworking space my girlfriend and I are opening) in webkit, and resize the window until you can see just a hair of the image in the second slide. If you then click on either of the slideshow controls, the slider jumps up over them in the z-index. I've tried overriding it with kinda gross css, but to no avail.

I'm thinking, given the way this has to be triggered, that it has something to do with the js, but then, I don't know enough about js to be sure.

Create “stable” branch

Since this thing is in pretty constant development.

Slides containing links don't appear correctly when focused on with the tab key

As an accessibility measure, people who can't use a mouse may jump from link to link by pressing the tab key. If one reaches a link from inside a slide, the slide becomes visible but it isn't correctly aligned left, and so you can see some part of the preceding slide. It'd be awesome if the on-focus slide occupied the entire slider viewport, like when using the regular previous/next buttons.

Next/Prev jumping ahead of corresponding slide

Hello,

Something's making my carousel jump from 1st slide to 3rd slide (2 to 4) when clicking on Next. Same thing happens when clicking on Prev, if you're on 3rd slide it will go to 1st one.

Any idea why this happens?

Thanks in advance.

Swipe not updating next/prev links

Next/Prev links aren't getting/losing "disabled" class when swipe is used to navigate.

Mo’ Better Swiping

The subject pretty much says it all.

Bug In JQuery Animate for move() function

Hi,

Discovered a bug in the current code that does not allow the "opt.namespace + '-aftermove'" code to be triggered. The jquery animation functionality at line 272 needs to change to the following code

.animate({ marginLeft: ui.moveTo + "%" }, { duration : opt.speed, queue : false, complete: function() {
$(this).trigger( opt.namespace + "-aftermove" );
}});

'Slidewrap' name and swiping

I noticed in the demo that only the first example slides would advance via a swipe. After messing with it a bit, I saw that in the initializing script if there's a number after '.slidewrap' the slider wouldn't swipe: e.g. '.slidewrap2' and '.slidewrap3' won't advance with a swipe. Taking the number out makes swiping work.

slideHed links not changing slides

Clicking on the generated links don't change the slides. I think I have a fix for it on my fork (boberetezeke/Dynamic-Carosel). Without my change on the demo.html the First Slide, Second Slide, etc links do nothing. Not sure if this used to work or what. Also not sure how to submit changes to a forked project (I have never done this before).

Thanks for your work,
Steve Tuckner

Can it work with jQuery Mobile?

I got it working as a standalone. However, when I put it on a page with jQuery mobile (http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js), jQuery mobile appears to break it. Any ideas?

Swiping on the first slide

Trying to swipe to the previous slide on the first slide gets stuck. Occasionally it will go to the second slide. I was only able to reproduce this on the second carousel on http://wilto.github.com/Dynamic-Carousel/.

Screenshot: http://cri.st/7UmW

This code doesn’t not suck.

Ah, the responsive carousel plugin. I was so young, back when I wrote this—so naïve. A wide-eyed developer, just starting to make his way in the world. One whole year ago.

I’m rewriting this. Stay tuned.

Random start order

Hi Wilto, loving your work as you already know!

You probably won't like this idea, but I have a potential project that will no doubt be responsive and I can already see a request to have a random starting place. I don't want to jump randomly when paginating as that would obviously be too confusing, but when the user loads the page, the carousel might start at item 2, or 5, or 9 etc.

Does that make sense? If yes, wasn't sure if it's the sort of think you'd consider adding as an option?

Richard.

License

Hey mate, just wondering if you could add a license declaration somewhere so people know what they can/can't do with your code, what projects they can use it in etc. Would be much appreciated!

Cheers,

Mark

Request: Auto Transition

Absolutely fantastic carousel, one of the few to take responsiveness into the equation.

Feature request: Would love to see an "auto-advance" slide added into this carousel.

Images max-width for mobile

I modified the first section of your example: http://matmarquis.com/carousel/. However, I'm looking to get each of my images to fit a max-width of 100%, so it will proportionally fit the full width of a mobile device.

It appears fine in my desktop browser, but once I take a look at it on an iPhone, the individual images do not fit the full width of the screen. I'm not quite there yet, any ideas?

Over-swipe

Howdy,

Testing the carousel on iphone - looks great.

However, I'm able to swipe my carousel beyond the last item - and then it wont snap back in to place.

Is this right?

Bug in IE6

The sliders #2 and #3 on the demo page at http://matmarquis.com/carousel/ do not work properly on IE6. Two slides are shown at the time. I'm not sure if it's an issue with the CSS or the JS.

CSS examples?

I could be missing something but I do not see any carousel related formatting going on when I look at the demo.html.
If I look at this page http://www.greepit.com/2011/09/dynamic-carousel-free-carousel-plugin-for-responsive-layouts/ I see a screensnap, unfortunately this is not the display I am gettign, although the next/previous buttons work,

Anyway to start at a specific slide?

Hi,

I was wondering if there is anyway to start the carousel at a specific slide? i.e. I have 3 slides, but I want the initial slide to be 2, so the user could go back or forward one slide.

Cheers, Richard.

Pagination Feature request

Love this plugin so much, thanks for releasing it.
Wondering if you've thought about adding a pagination/paging feature? This is a pretty common pattern these days and would certainly enhance user experience and make this plugin more awesomer than it already is.

Cheers
Dan

data-autorotate

Hey Matt - any chance you might have a quick fix for data-autorotate when using the pagination=true/addNav=false (little dots)

Launching the site I've been working on with your plugin in Drupal this afternoon and it would be nice to get that bit sorted if at all possible.

Thanks again -

Jason

Other versions of jQuery tried?

Have you tried this with other versions of jQuery?

I am thinking 1.3.2 since that is what I am stuck with for the site that I would like to use this on...

addNav controls not working in IE7+error warning

The generated nav controls for prev/next don't seem to work in IE7

Also I'm getting an error message stating: 'moveTo' is null or not an object on line 245

Yeh IE7 sucks but...

creating multiple carousels on one page

I'm creating multiple sliders on a page and running into problems in Chrome. All sliders except the last one skip forward 2 slides. The last slider on the page works fine. Anyone no why this is happening?

Here's the example:
http://andrewlohman.com/work/

First 2 sliders skip forward. The last one works great.

'moveTo' is null or not an object (IE)

Hi Matt,

Sorry to be a pain, but in IE8 (haven't tested other IE versions yet) when I click to navigate through the slides, IE throws up a JS error (below). Any ideas?

Message: 'moveTo' is null or not an object
Line: 231
Char: 5
Code: 0

Cheers, Richard

Issue with previous transition in Firefox

When clicking previous, the slide will move above 50 pixels, stop, and then animate the rest of the way. It looks fine in Chrome and the "next" transition is fine. I commented out the following to fix it:

"-moz-transition" : transition,

Also, you should mention on the docs that the custom previous and next links should have an HREF set to the slider ID. Otherwise the links/arrows won't work.

Disabled pinch/zoom on iOS?

I’m not sure, but I think the carousel plugin might be a little greedy with capturing touch/swipe events. To replicate the bug I’m seeing:

1. Hold an iPad in portrait mode.
2. Open http://responsivewebdesign.com/robot/
3. After the page has loaded, rotate the iPad into landscape mode. This’ll trigger iOS’s lovely zooming bug on width=device-width viewport settings. (Yay.)
4. Try to pinch to zoom out. You won’t be able to. It sucks. You might cry a little.

You can, however, double-tap to zoom out.

I noticed this on the iPad, but it might affect other iOS devices as well. (The sample page disables the plugin below a certain resolution threshold.)

Fade rather than Slide?

What would I need to do to make the transition a fade rather than slide?

Speed oddness (granted, in Drupal w/jQuery 1.3.2)

Speed of transition seems uneven and not sure how better to describe: set for 800, 3 images in rotation: first has the 'right' delay, next one might be very fast, another might be OK. You can view it in action here:

http://www.standrewsch.org

Thanks for all the work - really appreciate it. Hope we can smooth this out - let me know how I can help.

Jason

timer option

autostart, etc

Pagination triggering namespace

Howdy,

I've switched on pagination which is great (although I'm looking to define where it should be generated) and noticed that the links aren't aware when they are selected, and are still running the 'beforemove' namespace.

How might I stop this firing?

Cheers