Question

我在Magento网站上有一个自定义的滑块。它具有响应性，并具有自定义触摸行为。行为应如下：

三个图像滑块，中间一个应该有不透明度1.0，其余只有0.15
在较小的分辨率上，仅显示2张图像。右边的那个应该有1.0，左边的图像应该有0.15不透明度
在移动设备上，显示1张图片。当前显示的图像应该具有1.0不透明度。

我使用CSS / jQuery mix。

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-views ul li {opacity：.15; } .more-views ul li.active {opacity：1.0; }

JAVASCRIPT 很长，你可能想检查元素。但这个想法如下。单击“下一个”箭头时，将克隆列表的第一个元素，将其附加到后面并从第一个位置销毁。稍后，活动类将被删除并添加到列表中的第二个<li>。像这样的东西

<ul>
<li class="elem1"></li>
<li class="elem2 active"></li>
<li class="elem3"></li>
<li class="elem4"></li>
</ul>

第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.如果单击右箭头（下一个箭头）一次，列表中的第一个元素将不透明度保持为1.0（仅限Chrome）。 2.如果检查元素，则说它的不透明度为0.15 3.如果您调整浏览器大小，您将看到不透明度再次设置为.15 4.如果在Firebug中启用/禁用不透明度，它的工作方式应该如此。 5.如果在下一个箭头上单击2次，则不透明度错误消失。

您可以在此处查看实时示例： http://www.mackage.com/ca/en/jeffrey-black-leather-jacket

Answer 1

从site.css的第298行删除以下规则声明似乎解决了这个问题。

.product-view .product-img-box .more-views ul li:nth-child(2),

当您删除最左侧（列表顶部）元素时，Chrome必须混淆计算第n个孩子。它必须在删除DOM元素之前计算第n个孩子。

此外，对于活动类，看起来您不需要第n个子规则。

jQuery滑块不透明度错误仅适用于Google Chrome

1 个答案: