0

私はJavaスクリプト、html、およびcssを使用してPhone Gapで作業しています。this を使用してスワイプビューを実装しました。

私の疑問は、CSSがどうあるべきかです。私が実装した CSS は次のとおりです。

.swiper-threshold {
width:100%;
height:350px;
margin-top:40px;
text-align:left;
line-height:20px;
font-size: 15px;
text-align:justify;
text-justify:inter-word;
}

.swiper-threshold .swiper-slide{
width:auto;
height:350px;
margin-top:2%;
margin-left:0;
padding-right:0%;
text-align:left;
line-height:20px;
font-size: 15px;
text-align:justify;
text-justify:inter-word;
}

スライドの動きは左から右へです。最後のスライドに達すると、動きが逆になります。0 から 5に変更margin-left:0;すると、スライドすると左のスペースが加算され、最後のスライドが画面の半分に表示されます。

しかし、私が与えると、margin-left:0;すべてが左マージンに貼り付けられます。

html コーディング:

 <div id="swipe_body">
    <div class="swiper-container swiper-threshold">
        <div class="swiper-wrapper" id="swiper-wrapper">

        </div>
    </div>
</div>

SWIPER-SLIDEの作成

            var val = k+1;
            var superdiv = document.getElementById('swiper-wrapper');
            var newdiv =  mySwiper.createSlide('div');
            newdiv.append();
            var divIdName = 'swiper-slide'+val;
            console.log("div name: "+divIdName);
            newdiv.setAttribute('id',divIdName);
            newdiv.className="swiper-slide";
            superdiv.appendChild(newdiv);
            var cnt = '<div id="container'+val+'" class="container">values</div>';
            document.getElementById(divIdName).innerHTML=cnt;
            console.log("processsing parameter loop ");

n回のスワイプでスライドが画面の中央の同じ位置になるようにするには、何を指定すればよいですか。

どうぞ、私を導いてください！

4

1 に答える 1

1

私が正しく理解している場合、スライダーを画面の中央に配置しようとしていますが、そうすることで、スライダー要素自体にマージンを追加しています。あれは正しいですか？

その場合、問題が発生している理由は、スライダーの実装自体がマージンを使用して、移動中にスライドを左右に配置するためです。

スライダーの周りの間隔を制御するための最も簡単な方法は、直接ターゲットできる別の div でラップすることです。

したがって、設定したディメンションなどを使用すると、HTML は次のようになります。

<div class="slider-positioner">
    <div id="swipe_body">
        <div class="swiper-container swiper-threshold">
            <div class="swiper-wrapper" id="swiper-wrapper">

            </div>
        </div>
    </div>
</div>

次に、この CSS をドロップしてその新しい div をターゲットにし、それを中央にプッシュできます (以下で行ったように amrgin: auto を使用するか、希望するように設定されたマージン量を使用します)。

.slider-positioner{
    display: block;
    width: 550px; //set this to the width of your slider
    height: 350px;
    margin: 0px auto;
}
于 2013-05-24T06:35:10.010 に答える