Как наложить непрозрачность на неактивные элементы слайдера?

Question

Я использую слайдер Anything (https://github.com/ProLoser/AnythingSlider/wiki), и я отредактировал его, чтобы посетитель мог видеть следующие и предыдущие изображения, которые будут отфильтрованы в середине. Для целей этого поста этот средний слайд классифицируется как 'активный 'слайд и изображения с обеих сторон классифицируются как неактивные. См. код здесь: http://jsfiddle.net/JCQ6Q/7/

То, что я пытался сделать, это применить непрозрачность CSS к «неактивным» слайдам, чтобы эти изображения были меньшевидимое, чем среднее «активное» изображение. Когда пользователь нажимает стрелки влево или вправо, чтобы неактивное изображение скользило в середину, я бы хотел, чтобы среднее «активное» изображение было полностью видимым. Тогда предыдущее «активное» изображение затемстановится неактивным и, следовательно, становится менее видимым. И так далее ...

Есть ли в любом случае использование Javascript или CSS для этого? Я не самый лучший кодер и пробовал только способ CSS, но это не так "• достаточно гибок, чтобы адаптироваться к браузерам различной ширины.

Answer 1

Добавить следующее:

.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 */
}

Надеюсь, это поможет.

Answer 2

Добавьте следующие строки в ваш css:

#slider .panel{
  opacity: 0.1;   
 }

 #slider .activePage{
   opacity: 1;   
  }