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

Question

滑动的方向是从左到右。当它到达最后一张幻灯片时，运动会反转。当我将 margin-left:0; 从0改为5时，随着滑动，左侧空间不断增加，最后一张幻灯片占据了屏幕的一半。

我正在使用JavaScript、HTML和CSS开发PhoneGap。我使用这个实现了一个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;时，所有内容都粘在左边缘。

HTML代码：

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

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

创建 SWIPER 幻灯片

            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次滑动后，保持在屏幕中央相同的位置。

请指导我！

- user

---

你能创建一个fiddle吗？很难理解你想通过Swiper实现什么。而且我在你的示例中看到这不是完整的Javascript。 - Vladimir Kharlampidi

Answer 1

您正在使用的脚本默认情况下会自动居中。居中的技巧是在父元素上使用“margin: 0 auto”。 因此，您现在需要找出您破坏居中的原因。

- Xarcell

---

Xarcell，谢谢...我以为这个命令不起作用...我对 SWIPER-CONTAINER 进行了更改并删除了所有先前的默认设置...我解决了我的问题。 - user