0

我正在使用 java 脚本、html 和 css 在 Phone Gap 中工作。我已经使用这个实现了一个 swipeview 。

我的疑问是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;从 0 更改为 5 ......当我滑动左侧空间时，最后一张幻灯片显示为屏幕的一半。

但是，当我把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

如果我理解正确，您是在尝试让滑块位于屏幕中间，但这样做是在为滑块元素本身添加边距。那是对的吗？

如果是这样，您遇到问题的原因是滑块实现本身在向左/向右移动期间使用边距来定位幻灯片。

为了控制滑块周围的间距，最简单的方法是将其包装在另一个可以直接 traget 的 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 回答