Is it possible to scroll two separate carousels by same amount of scroll offset ?

[kulik88]

I'm working on a project where I have two separate horizontal carousels (upperCarousel, lowerCarousel) and I would like to synchronize their scroll movement. What I mean is that when I scroll one of those carousels the other should move exactly the same way. I managed to do it (partially) by assigning their scroll offset values to each other but I encountered an issue. When carousels don't wrap there is a problem when I scroll one of them to far and it starts to bounce. When that happens even after assigning upper carousel scroll offset to equal the lower carousels scroll offset it doesn't scroll. Is there a way to allow the upper carousel to move exactly the same way as the lower one even with bouncing deceleration etc. ?? I hope I explained it clearly enough.

[nicklockwood]

There's no way to do this currently. Instead of two carousels, why not just use a single carousel with two rows of views? (basically, place two views stacked vertically inside each item view)

[kulik88]

I tried that but the problem is that the lower carousel is a nested carousel which elements are a lot wider the the upper carousel. Basically the upper carousel serves as a main menu and the lower one serves as a submenu. Because of that the spacing of upper carousel is different than lower carousel. The feature I need to implement is to allow scrolling of the upper carousel by doing vertical scrolling of the lower carousel. I thought that I would space lower carousel items wider and hide all except the selected one and somehow synchronize their movement.

[nicklockwood]

Instead of synchronizing them perfectly, why not synchronize incrementally, so whenever the top carousel currentItemIndexDidChange method fires, call scrolllToItemAtIndex:animated: on the bottom carousel. It won't be quite the same effect, but should still look good and won't have the bounce problem.

[kulik88]

I have that already. When I change current selected item on the top carousel then the lower one scroll and the other way around. Now I'm working on more design-like problems like this scrolling synchronization. In the meantime I will disable bouncing and maybe try to modify iCarousel code. Is it allowed ? I will note every change I make of course.

[nicklockwood]

Yes, it's absolutely allowed. It may be a simple case of removing some of the clamping logic on the setScrollOffset: method.

If you implement a fix that you believe doesn't break any other functionality, please file a pull request and I may merge your changes back into the core library.

[mbcoder17]

@nicklockwood Now is it possible to synchronize the 2 carousels perfectly instead of waiting for one of them to have a different index? This animation does not look so good. I am trying to achieve the same feature with a menu at the top and VCs on the bottom, but the width of the views on top are different.

[nicklockwood]

Yes, you can sync them perfectly. In the carouselDidScroll delegate event of one carousel set the scrollOffset of the other carousel to match the first one (the scrollOffset is now readwrite and public)

[mbcoder17]

@nicklockwood Thanks so much, that worked perfectly!

[phuhk]

@nicklockwood hi there, so any similar solution for sync with other UIScrollView?

[nicklockwood]

@phuhk you can use the same solution, you just need to multiply the offset by some constant because iCarousel.scrollOffset uses normalized offset units and UIScrollView.contentOffset is in points.