5

私はWeb開発とjQueryにまったく慣れていないので、ご容赦ください。

作業中のWebサイトでNivoSliderを使用しています。レスポンシブウェブサイトです。スライダーをすべての画面サイズで簡単に表示できるようにしたいと思います。CSSにブレークポイントを設定して、サイトが最小サイズ（モバイル画面のサイズ程度）になると、スライダーが200％の幅に設定され、オーバーフローが非表示になり、画像が大きくなります。

これは問題なく機能しますが、このサイズではスライダーの中央しか見えず、画面の端で側面が切り取られています。私が使用しているほとんどの画像では、これは問題ではありませんが、そのうちの1つは非常にぎこちなくトリミングされています。スライダー全体の位置を変えるのは簡単ですが、小さな画面で見やすくするために、この1つの画像を移動してみてください。

デフォルトのnivo-slider.cssに追加したCSSは次のとおりです。

@media screen and (max-width: 31.25em) { /* 500px ÷ 16px */

.slider-wrapper{
    overflow: hidden;
}

.nivoSlider {
    left: -50%;
    width:200%;
}

.nivo-caption {
    margin-left: 25%;
    width: 50%;
}

}

どうもありがとう！

4

2 に答える 2

1

CSS を使用するだけで、その特定の画像に 1 回限りの型クラスを追加し、それを @media クエリにスローできます。

.my-one-off { left:??px; margin-right:??px }

jQuery を使用してその画像を検索することもできます (私が間違っていなければ、Nivo は jQ ライブラリを使用しています)。

$('img[src*="one-off.jpg"]').css('margin-left',35); // just an example

または

$('img[src*="one-off.jpg"]').addClass('my-one-off');

于 2012-10-23T19:35:23.293 に答える
0

nivo-slider3.1 を見ました。特定の画像のみを選択して左に移動するには、css で以下を使用できます。

img[src="YourSpecialPic.jpg"]{
  left:50px !important;
}

HTML 内で次の img 属性を使用して、1 つの特定のスライドにカスタム アニメーションを設定することもできます。

data-transition="slideInLeft"

任意の属性をサブして目的の効果を得ることができますが、これでうまくいくと思います。

ノート：

使用している効果に応じて、アニメーションが台無しになるかどうかが決まります (たとえば、左の移動を実行した後にスライス アニメーションが台無しになります。slideInLeft アニメーションは正常に動作しているようです)。

その特定のスライドのすべてのアニメーション効果を修正するための迅速または簡単な解決策はありませんが、javascript 内の条件文でそれを達成できると確信しています (私は十分に頭が良くありません)。

于 2012-10-28T00:04:08.673 に答える