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

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

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

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


javascript slider jquery css anythingslider
person egr103    schedule 20.01.2012    source источник

Ответы (2)


arrow_upward
2
arrow_downward

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

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

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

person Sagar Patil    schedule 20.01.2012
comment
Это тоже работает. Я не большой поклонник фильтров, но использование ползунков требует этого. Спасибо за вашу помощь!! - person egr103; 20.01.2012

arrow_upward
1
arrow_downward

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

#slider .panel{
  opacity: 0.1;   
 }

 #slider .activePage{
   opacity: 1;   
  }
person dimitril    schedule 20.01.2012