3

http://jsfiddle.net/2RE3f/6/embedded/result/

レスポンシブ js スライダーを作成しようとしていますが、メディア クエリ間を移動するときにブレーク ポイントの不具合を把握できないようです。

たとえば、私の jsFiddle を見て、ウィンドウを iPad サイズ (画面サイズの幅 1024 ピクセル) に設定してから、幅 1200 ピクセルに引き出すと、スライダーが壊れて、新しいグリッド サイズ (強調表示されている) に適用されるマージンがあります。スライダーをオフセットします。ただし、iPad のサイズに戻すと、スライダーは右側のオフセットにマージンを適用せず、正常に動作します。グリッドを 1200px 幅でロードすると、スライダーは正常に動作しますが、iPad サイズにサイズを縮小すると、右矢印を押すと右に余白が追加されます。

何らかの理由で、このパディングされたマージンをグリッドに追加する方法と理由がわかりません。

矢印キーを使用する必要があります (2 つのグリッド ギャラリー間を移動するには、右、左)。jsFiddle にはさらにコードがありますが、rwd には適用されません。

これはCSSです

@media screen (max-width: 1400px) {
#portfolio img {
    height: 400px;
    width: 400px;
}
#slider ul li {
    width: 1200px;
}
}

@media screen and (max-width: 1030px) {
.uni_con {
    width: 1024px
}
.shell {
    width: 1024px;
}
.container {
    width: 1024px;
}
#portfolio img {
    height: 512px;
    width: 512px;
}
#slider ul li {
    width: 1024px;
}
#slider .caption {
    width: 512px;
    height: 512px;
}
#slider .caption::before {
    width: 514px;
    height: 514px;
    line-height: 508px;
}
#slider .caption::after {
    width: 512px;
}
#slider .caption:hover::before {
    width: 512px;
    height: 512px;
}
#slider .caption:hover::after {
    width: 512px;
}
}

Jクエリ

jQuery(function ($) {

var $sl = $('#slider'),
    $ul = $('ul', $sl),
    $li = $('li', $ul),
    slideCount = $li.length,
    c = 0, // current
    slideWidth = $li.width(),
    slideHeight = $li.height(),
    sliderUlWidth = slideCount * slideWidth;

$sl.css({
    width: slideWidth,
    height: slideHeight
});
$ul.css({
    width: sliderUlWidth
});

function move() {
    if (c == slideCount) {
        c = slideCount - 1;
        // fade out #next btn
        $('#next').stop().fadeTo(200, 0.5);
    }
    if (c == slideCount - 1) {
        $('#next').stop().fadeTo(200, 0.5);
        $('#back').fadeTo(200, 1);
    } else if (c < 0) {
        c = 0;
        $('#back').stop().fadeTo(200, 0.5);
    } else {
        $('#next').fadeTo(200, 1);
        $('#back').fadeTo(200, 0.5);
    }
    $ul.stop().animate({
        left: -c * slideWidth
    }, 500);
}

$('#back, #next').click(function () {
    return move(this.id == 'next' ? c++ : c--);
});

$(document).keydown(function (e) {
    var k = e.which;
    if (k == 39 || k == 37) {
        e.preventDefault();
        return move(k == 39 ? c++ : c--);
    }
});

});

サンプル画像

2 番目の LI (右キーを使用) では、このマージンが追加され続け、グリッドがコンテナとインラインになるのを防ぎます。

ありがとう。

4

2 に答える 2

2

わかったと思います！#slider に奇妙なスタイルが適用されていました。

    #slider {
overflow: hidden;
position: relative;
margin: 0 auto;
}

はoverflow:hidden;イメージを切り取り、margin:0 auto;はイメージを横に押し出していました。

これらのスタイルは jquery によって追加され、#portfolio から継承されたと思います。

解決策はこれをcssに追加していました：

    #slider { /* ADDED SOLUTION*/
    margin:0 !important;
    overflow:visible !important;
}

ここで表示してください: http://jsfiddle.net/2RE3f/10/

ここでソリューションをテストします: http://jsfiddle.net/2RE3f/10/show/light/#以下を使用して: ポート リサイザー ブックマークレットを表示 (2 つ以上のリンクを投稿できない原因を Google に知らせてください)ブラウザを使用するすべてのデバイスのサイズ。

画像の間に薄いギャップが適用され、ある幅の上部または下部に適用され、いくつかの画像にカーソルを合わせると、まだ問題があります..そこで何が起こっているのかわかりませんが、それはマイナーです.

于 2013-11-06T12:57:36.433 に答える