1

独自のスライダーを作成していますが、応答性を高めるための助けが必要です。現在、最初のスライドのレスポンシブ パーツで動作しますが、次のスライド (この場合、最初の子ではないすべての li) に移動すると、li の位置と幅が加算されず、すべてがうまくいきません。 .

説明するのが難しいので、誰かがここを見てくれたらうれしいです:

http://robbinj.se/r/

幅が 100% のラッパーがあり、すべての li の幅がラッパーの幅 100% に設定されます。ページに移動しようとした後に私が何をしているのか理解できない場合は、最初のスライドでブラウザーのサイズを変更してください。これは、他のすべてのスライドでも同様に動作するようにしたい方法ですが、その方法についていくつかのアイデアが必要です!

jQuery は次のとおりです。

    var slideLiWidth = $('#slider').width(),
    slideUl = $('#slider ul'),
    slideLi = $(slideUl).find('li'),
    slides = $(slideLi).length,
    slideNav = $('.slideNav'),
    current = 1;

slideLi.width(slideLiWidth);

$(window).resize(function() {
    var slideLiWidth = $('#slider').width();
    slideLi.width(slideLiWidth);
});

slideNav.click(function() {
    dir = $(this).data('dir');
    transition();
});

function transition() {
    var slideLiWidth = $('#slider').width();
    if (dir === 'next' && current < slides) {
        slideUl.transition({x: '-='+slideLiWidth}, 500, 'ease');
        current++;
    }
    else if (dir === 'back' && current > 1) {
        slideUl.transition({x: '+='+slideLiWidth}, 500, 'ease');
        current--;
    }
}
4

4 に答える 4

1

これが役立つと思います。これは、小型デバイスやタブレットでも機能します。同じページに複数のカルーセルを配置することもできます。「DIV」-「SpecDataWrap」を複製して ID を変更するだけです。

<div class="ContainerWrap">
    <div class="Container">
        <div class="AllSpecsDataWrap">
            <div class="SpecDataWrap" id="SpecDataWrap1">
                <div class="SpecDataSlides activeNavSlide">
                    <img src="http://s19.postimg.org/lzem156s3/image1.jpg" />
                    <div class="SpecDesc SpecDescRight">
                        <h2>Choose to be unique.</h2>
                        <div class="SpecDescDetails">
                            Metal accents, colorful hues, real woods and leathers, and a customizable laser-etched signature offer thousands of ways to make your Moto X unique.
                        </div>
                    </div>
                </div>
                <div class="SpecDataSlides InActiveNavSlide">
                    <img src="http://s19.postimg.org/6cira13mb/image2.jpg" />
                    <div class="SpecDesc SpecDescLeft">
                        <h2>Choose to be unique.</h2>
                        <div class="SpecDescDetails">
                            Metal accents, colorful hues, real woods and leathers, and a customizable laser-etched signature offer thousands of ways to make your Moto X unique.
                        </div>
                    </div>
                </div>
                <div class="SpecDataSlides InActiveNavSlide">
                    <img src="http://s19.postimg.org/f4zpxpor7/image3.jpg" />
                    <div class="SpecDesc SpecDescRight">
                        <h2>Choose to be unique.</h2>
                        <div class="SpecDescDetails">
                            Metal accents, colorful hues, real woods and leathers, and a customizable laser-etched signature offer thousands of ways to make your Moto X unique.
                        </div>
                    </div>
                </div>
                <div class="SpecSlideNavigation">
                    <div class="leftNavSpec SpecSlideNav"></div>
                    <div class="bulletsNavSpec">
                        <ul>
                            <li class="activeImage"></li>
                            <li class="InActiveImage"></li>
                            <li class="InActiveImage"></li>
                        </ul>
                        <div class="clearFix"></div>
                    </div>
                    <div class="RightNavSpec SpecSlideNav"></div>
                </div>
                <div class="clearFix"></div>
            </div>
        </div>
    </div>
</div>

JS および CSS コードは、 https ://jsfiddle.net/raju_sumit/Ld21vutz/ で確認できます。

于 2015-12-27T09:59:42.330 に答える
1

問題は、移動距離の計算方法にあります。現在のリスト アイテムの幅の変換値を加算および減算することは正しかったのですが、ユーザーがビューポートのサイズを変更する可能性があるため、この値が更新されないという事実を考慮していませんでした。確かに、これは実際に閲覧中にビューポートのサイズを変更するユーザーにとってのみ問題です。たとえば、タブレットを使用している人なら誰でも問題ありません。

それでも、本当に完璧なスライダーを探しているなら、私なら次のようにします: 現在アクティブなスライドのカウントを保持する変数を作成します その変数を使用して、サイズ変更されたビューポートに合わせて変換値を調整します

そのコードは次のようになります。

$(window).resize(function() {
    var slideCounter = 1; // Because the first slide is, well ... first.    
    var slideLiWidth = $('#slider').width();
    slideLi.width(slideLiWidth);
    slideUl.transition({x: '-='+slideCounter*slideLiWidth}, 500, 'ease'); // Adjust the UL's transition value to match the current slide position and width.
});

function transition() {
    var slideLiWidth = $('#slider').width();
    if (dir === 'next' && current < slides) {
        slideUl.transition({x: '-='+slideLiWidth}, 500, 'ease');
        current++;
        slideCounter++; // Increment the counter to keep up.
    }
    else if (dir === 'back' && current > 1) {
        slideUl.transition({x: '+='+slideLiWidth}, 500, 'ease');
        current--;
        slideCounter--; // Increment the counter to keep up.
    }
}

追加した行にコメントを付けました。上記のコードを実際にテストすることはできませんが、動作することは間違いありません。そうでない場合は、少なくとも正しい方向に向けています。

乾杯！

于 2013-04-10T08:04:47.080 に答える
1

この問題は、幅とスライド オフセットをピクセル単位で指定する選択に関連しています。代わりに幅を定義しようとする必要がある場合%(たとえば、すべて<li>が100%広い場合)、スライダーをアニメーション化するときtransform: translate(-100%, 0)に、2番目の画像に適用し、次にtransform: translate(-200%, 0). 3番目など。

負のオフセットと適用された幅は、ブラウザーのサイズに合わせて自動的に再計算されるため、ブラウザーのサイズを変更しても、これは正常に機能するはずです。ブラウザーは、相対オフセットを正しいピクセル量に変換します。

概念実証のためにこのフィドルを見てください（FirefoxとChromeで試しました）：http://jsbin.com/ecifoc/1/（スライダーを動かしてブラウザのサイズを変更してから、もう一度スライダーを動かしてください）

幅の継続的な再計算や負のオフセットなどの他の方法も問題なく機能する可能性がありますが、それらは明らかにコストがかかりすぎて (通常、resizeイベントに何らかのハンドラーをアタッチする必要があります)、コードが複雑になるため、エラーが発生しやすくなります。

注:無限スライダーも管理する必要がある場合は、このディスカッションを参照してください。

于 2013-04-10T08:04:59.020 に答える
0 
var $slider = $('#slider'),
    imgW = $('#slider li').outerWidth(true),
    winW = 0,
    zero = 0;



function getSizes(){
    winW = $(window).width();
    zero = (winW-imgW)/2;
    $slider.animate({left: zero},0); // This should 'zero' the position on resize
}

getSizes(); 


$(window).resize(function() {
    getSizes();
});

何か見逃した場合は、ここでロジックを取得してください: http://roxon.in/scripts/infinite_gal/index.html

于 2013-04-10T08:04:21.267 に答える