iCarousel - How to shift the focus to the left side

Question

I need to implement iCarousel in a way so that it looks like this:

I have done all the modifications at my end to make it look like this but now the problem is that iCarousel works with the center image in the focus. Can I make it so that if there are only two images, they don't appear in the center but rather on the left? Think about it like the "left indented" content.

How do I do this?

Answer 1

The viewpointOffset property doesn't really work that way. It will let you align to one edge, but then when you scroll to the end you'll have the same problem.

iCarousel wasn't designed to do this. I suggest you switch to SwipeView instead (http://github.com/nicklockwood/SwipeView) which has the same delegate/datasource interface, but has an alignment property that you can use to set edge alignment, like this:

swipeView.alignment = SwipeViewAlignmentEdge;

Answer 2

iCarousal provide a property to sift focus left or right by set the width offset.

For right side use this code for swift 2.3 -

let widthOffset: Float = -120.0
self.customCarousel.viewpointOffset = CGSize(width: CGFloat(widthOffset), height: CGFloat(0))

Answer 3

This should be the property in iCarousel you are looking for viewpointOffset

Example...

// Modifiy widthOffset so it works well in your case
float widthOffset = 100.0;
[_yourCarousel setViewpointOffset:CGSizeMake(widthOffset, 0)];

Answer 4

Visit https://github.com/nicklockwood/iCarousel/issues/142 it may help. nicklockwood (author) answer:

You could use the delegate and create a custom transform that offsets all of your views by a negative amount. Something like this:

- (CATransform3D)carousel:(iCarousel *)carousel itemTransformForOffset:(CGFloat)offset baseTransform:(CATransform3D)transform
{
    float OFFSET_WIDTH = ...; // set this to about half the width of your view
    return CATransform3DMakeTranslation(offset * itemWidth - OFFSET_WIDTH, 0, 0);
}

The only problem would be that when you reach the rightmost end of the carousel there would be a gap, but you could use placeholder views to fill the gap up.

Answer 5

I tripped over the same problem. After simple math I've found a more accurate answer. I've put this code in my viewDidAppear() function, because when I put it in viewDidLoad() the view.frame.width and view.frame.height took the original width of my storyboard, which didn't fit to bigger devices.

My use case was the following. My iCarousel items are simple squares. That means, I have for example a height of 3 and a width of 3. But the width of my iCarousel view is 5. In sum I have 5-3=2 space, 1 left and 1 right (because we know it's default is centered). So last step is to divide with 2 to get the width on one site = 1. With this knowledge we just have to set the viewPointOffset to 1 (in this case).

Final formular: let widthOffset = (view.frame.width - view.frame.height) / 2

Example in my code:

let widthOffset: Float = Float((mDetailCarousel.frame.width - mDetailCarousel.frame.height) / 2 )
mDetailCarousel.viewpointOffset = CGSize(width: CGFloat(widthOffset), height: CGFloat(0))