cloud9carousel icon indicating copy to clipboard operation
cloud9carousel copied to clipboard

Modify spacing between rendered items

Open semammerlaan opened this issue 6 years ago • 1 comments

Hi!

This is a great plugin. I'm curious if there is a way to change the spacing, I want to make the spacing less between the 3 items in front. Tried something like this in this.render, but that gives a stutter:

var item = this.renderItem( i, radians ); if(i === (nearest - 1) || (nearest === 0 && i === (count - 1))) { var item = this.renderItem( i, radians + 0.2 ); } else if(i === (nearest + 1) || (nearest === count - 1 && i === 0)) { var item = this.renderItem( i, radians - 0.2 ); } else { var item = this.renderItem( i, radians ); }

After I change the radians I think I need to change it back after, to prevent the weird transition. Maybe you know a solution!

semammerlaan avatar Nov 13 '18 08:11 semammerlaan

I think that making it possible to provide a custom transform function that renderItem() could invoke, if provided, to modify the attributes of the item, within the context of the carousel's orientation, from the values calculated by default before they are passed to the DOM would open up possibilities such as this one.

I haven't tried your code (feel free to provide a jsbin live demo, so it's easy to check it out), but I'm thinking maybe a smoother function for the angular deviation would eliminate the discontinuity. You'd probably want to use something that is significantly exaggerated around Math.PI / 2 (which is nominally the angle that points towards the front of the carousel).

specious avatar Feb 13 '19 03:02 specious