滑动视图中幻灯片的CSS [英] CSS of a slide in swipe view

问题描述

我在Phone Gap使用java脚本，html和css工作。我已使用此执行了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;

 <$> 
 c $ c>< div id =swipe_body> 
< div class =swiper-container swiper-threshold> 
< div class =swiper-wrapperid =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次滑动幻灯片应该是相同的位置中间

解决方案

如果我理解正确，你试图让你的滑块坐在屏幕的中间，但这样做，你要添加边距滑块元素本身。这是正确的吗？

如果是这样，你有麻烦的原因是滑块实现本身使用边距来定位幻灯片在左/右移动。 p>

为了控制滑块周围的间距，最简单的方法是将它包装在另一个div中，您可以直接使用它。

所以，使用你设置的维度/ etc，你的HTML将改为：

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

然后，您可以删除此CSS以定位新div并将其推入中间amrgin：auto，如我在下面做的，或使用设置的保证金金额，你似乎建议你想要的）：

  .slider -positioner {
 display：block; 
 width：550px; //将其设置为滑块的宽度
 height：350px; 
 margin：0px auto; 
} 
  

I am working in Phone Gap using java script,html and css. I have implemented a swipeview using this.

my doubt is how should the CSS be.The CSS i implemented is as follows.

.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;
}

the sliding movement is from left to right.when it reaches the last slide.the movement reverses. when,I change margin-left:0; from 0 to say 5...as and when I slide the left space gets on adding up the last slide is seen for half of the screen.

but,when i give margin-left:0; all are stuck to the left margin.

html coding:

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

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

SWIPER-SLIDE creation

            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 ");

what should i give such that n-number of swipes the slides should be the same position-middle of the screen.

please,guide me!

解决方案

If I understand correctly, you're trying to get your slider to sit in the middle of the screen, but in doing so you're adding margin to the slider elements itself. Is that correct?

If so, the reason you're having trouble is that the slider implementation itself uses the margins to position the slides during movement left/right.

In order to control the spacing around the slider, the easiest bet is to wrap it in another div which you can traget directly.

So, taking the dimensions/etc that you've set up, your HTML would instead look like this:

<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>

You can then drop this CSS in to target that new div and push it into the middle (either using amrgin: auto as I have done below, or using set margin amounts as you seem to suggest you would like):

.slider-positioner{
    display: block;
    width: 550px; //set this to the width of your slider
    height: 350px;
    margin: 0px auto;
}

这篇关于滑动视图中幻灯片的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！