How to change opacity for particular item

specious / cloud9carousel

:cyclone: 3D-perspective carousel for jQuery / Zepto

http://j.mp/cloud9demo

233 stars 88 forks source link

How to change opacity for particular item #11

Open airthomas opened 8 years ago

airthomas commented 8 years ago

Any method can set opacity for far image ? Many thanks.

specious commented 8 years ago

I would bind the onRendered event to a function that sets the opacity of each carousel item based on the total number of items and the value returned by floatIndex().

specious commented 8 years ago

See #14 for how to interface with individual items.

surml commented 3 years ago

This Thread is very old, but since I just had a similar problem, I'll comment...

A very simple CSS-only workaround would be using an attribute-selector for the foreground-item:

.cloud9-item { opacity: 0.7; transition: opacity 0.2s ease; } .cloud9-item[style*="scale(1)"] { opacity: 1; transition: opacity 0.2s ease; }