0

Magento サイトにカスタム ビルドのスライダーがあります。レスポンシブで、カスタムのタッチ動作があります。動作は次のとおりです。

  1. 3 つの画像スライダー、中央の画像の不透明度は 1.0、残りは 0.15 です。
  2. 解像度が小さい場合は、2 つの画像のみを表示します。右側の画像の不透明度は 1.0、左側の画像の不透明度は 0.15 です。
  3. モバイルでは、画像を 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-views ul li { opacity: .15; } .more-views ul li.active { 不透明度: 1.0; }

JAVASCRIPT は長いので、要素を調べる必要があるかもしれません。しかし、アイデアは次のとおりです。[次へ] 矢印をクリックすると、リストの最初の要素が複製され、の後ろに追加され、最初の位置から破棄されます。その後、アクティブなクラスが削除され<li>、リストの 2 番目に追加されます。このようなもの

<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 回クリックすると、リストの最初の要素の不透明度が 1.0 のままになります (Chrome のみ)。2.要素を検査すると、不透明度が0.15であることがわかります 3.ブラウザのサイズを変更すると、不透明度が再び.15に設定されていることがわかります 4.Firebugで不透明度を有効/無効にすると、そのように機能しますしたほうがいい。5. 次の矢印を 2 回クリックすると、不透明度エラーが消えます。

ここで実際の例を見ることができます: http://www.mackage.com/ca/en/jeffrey-black-leather-jacket

4

1 に答える 1

0

site.css の 298 行目から次のルール宣言を削除すると、問題が解決したようです。

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

一番左 (リストの一番上) の要素を削除するとき、Chrome は n 番目の子の計算で混乱しているに違いありません。DOM 要素を削除する前に、nth-child を計算する必要があります。

また、アクティブなクラスでは、nth-child ルールは必要ないようです。

于 2013-09-27T22:35:27.110 に答える