CODEWITHSUNDEEP
javascriptjquerycssslideranythingslider
egr103
egr103

Reputation: 4008

How do I apply opacity to inactive slider items?

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.

Upvotes: 1

Views: 1383

Answers (2)

Sagar Patil
Sagar Patil

Reputation: 1948

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.

Upvotes: 2

dimitril
dimitril

Reputation: 393

Add the following lines to your css:

#slider .panel{
  opacity: 0.1;   
 }

 #slider .activePage{
   opacity: 1;   
  }

Upvotes: 1

Related Questions