如何将SWIPER SLIDE定位在页面中央?

时间:2013-05-22 13:53:02

标签: html css css-float

滑动是从左到右。当它到达最后一张幻灯片时,机芯会反转。 什么时候,我将margin-left:0;从0更改为5 ...当我滑动左侧空间时,加上最后一张幻灯片可以看到屏幕的一半。

我正在使用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;
}

但是,当我给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个滑动应该在屏幕的中间位置相同。

拜托,指导我!

1 个答案:

答案 0 :(得分:1)

默认情况下,您使用的脚本会自动居中。居中的诀窍是使用:'margin:0 auto'作为父元素。

所以现在你必须弄清楚你做了什么来打破中心。