0
Magento 사이트에 맞춤형 슬라이더가 있습니다. 반응이 빠르고 사용자 정의 터치 동작이 있습니다. 동작은 다음과 같아야합니다Google 크롬에서만 jQuery 슬라이더 불투명도 오류
- 세 가지 이미지 가운데 하나는이 개 이미지를 표시, 불투명도 1.0, 나머지는 낮은 해상도에 단지 0.15
- 을 가져야한다, 슬라이더. 오른쪽에는 1.0이 있어야하고 왼쪽 이미지에는 0.15 불투명도가 있어야합니다.
- 모바일에는 1 이미지를 표시하십시오. 현재 표시된 이미지에는 1.0 불투명도가 있어야합니다.
CSS/jQuery 믹스와 함께 작동 시켰습니다.
HTML
<ul class="more-views">
<li><a href="someURL"><img src=..... /></li>
<li class="active"><a href="someURL"><img src=..... /></li>
<li><a href="someURL"><img src=..... /></li>
<li><a href="someURL"><img src=..... /></li>
<li><a href="someURL"><img src=..... /></li>
</ul>
CSS .more-전망 울 리 {불투명 : 0.15; } .more-views ul li.active {opacity : 1.0; }
JAVASCRIPT 길이가 길면 요소를 검사해야 할 수 있습니다. 그러나 그 아이디어는 다음과 같습니다. NEXT 화살표를 클릭하면 목록의 첫 번째 요소가 복제되고 첫 번째 요소의 뒤쪽에 추가되고 첫 번째 요소는 소멸됩니다. 나중에 활성 클래스가 제거되어 목록의 두 번째 <li>에 추가됩니다. 1. 클릭하면이
<ul>
<li class="elem1"></li>
<li class="elem2 active"></li>
<li class="elem3"></li>
<li class="elem4"></li>
</ul>
STEP 비슷해 1
<ul>
<li class="elem1"></li>
<li class="elem2 active"></li>
<li class="elem3"></li>
<li class="elem4"></li>
<li class="elem1"></li>
</ul>
2 단계
<ul>
<li class="elem2 active"></li>
<li class="elem3"></li>
<li class="elem4"></li>
<li class="elem1"></li>
</ul>
3 단계
<ul>
<li class="elem2"></li>
<li class="elem3 active"></li>
<li class="elem4"></li>
<li class="elem1"></li>
</ul>
현재 작은 문제는 다음과 같은 것이있다 그 오른쪽 화살표 (다음 화살표)를 한 번 누르면 목록의 첫 번째 요소가 불투명도를 1.0으로 유지합니다 (Chrome에서만). 2. 요소를 검사 할 경우 불투명도는 0.15 입니다. 3. 브라우저의 크기를 조정하면 불투명도가 .15로 다시 설정됩니다. 4. Firebug it에서 불투명도를 활성화/비활성화하면 해야하는 것처럼 작동합니다. 5. 다음 화살표에서 두 번 클릭하면 불투명도 오류가 사라집니다. http://www.mackage.com/ca/en/jeffrey-black-leather-jacket