Question

I’m using Anything slider (https://github.com/ProLoser/AnythingSlider/wiki) and I have edited it so that the visitor can see the next & previous images to be filtered into the middle. For the purposes of this post that middle slide is classed as the ‘active’ slide and the images either side are classed as inactive. See the code here: http://jsfiddle.net/JCQ6Q/7/

What I have been trying to do is apply CSS opacity to the ‘inactive’ slides so that those images are less visible than the middle ‘active’ image. When the user clicks the left or right arrows to make the inactive image slide into the middle, I would like the middle ‘active’ image to be in full visibility. That previous ‘active’ image then becomes inactive and therefore becomes less visible. And so on…

Is there anyway using Javascript or CSS, to do this? I’m not the greatest coder and have only tried the CSS way but that isn’t flexible enough to adapt to different browser widths.

Answer 1

Add the following:

.panel{ 
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
  filter: alpha(opacity=50); /* IE 5-7 */
  opacity: 0.5; /* Other browsers */
}

.panel.activePage{ 
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE 8 */
  filter: alpha(opacity=100); /* IE 5-7 */
  opacity: 1; /* Other browsers */
}

Hope this helps.