cloud9carousel
cloud9carousel copied to clipboard
Modify spacing between rendered items
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!
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).