滑动视图中幻灯片的 CSS
[英] CSS of a slide in swipe view
本文介绍了滑动视图中幻灯片的 CSS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 java 脚本、html 和 css 在 Phone Gap 中工作.我已经使用 this 实现了一个滑动视图.
我的疑问是CSS应该如何.我实现的CSS如下.
.swiper-threshold {宽度:100%；高度:350px；边距顶部:40px;文本对齐:左；行高:20px；字体大小:15px；文本对齐:对齐；文本对齐:字间；}.swiper-threshold .swiper-slide{宽度:自动；高度:350px；保证金最高:2%；左边距:0;填充右:0%;文本对齐:左；行高:20px；字体大小:15px；文本对齐:对齐；文本对齐:字间；}
滑动运动是从左到右.当它到达最后一张幻灯片时，运动反向.当，我将 margin-left:0; 从 0 更改为 5 ......因为当我滑动左侧空间时，会增加最后一张幻灯片的一半屏幕.
但是，当我给 margin-left:0; 时，所有都被卡在左边距.
html 编码:
<div class="swiper-container swiper-threshold"><div class="swiper-wrapper" id="swiper-wrapper">
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 名称:"+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("处理参数循环");
我应该怎么做才能使幻灯片的 n 次滑动应该在屏幕的相同位置 - 中间.
请指导我！
解决方案
如果我理解正确，您正试图让滑块位于屏幕中间，但这样做是在为滑块元素本身.对吗?
如果是这样，您遇到问题的原因是滑块实现本身在向左/向右移动期间使用边距来定位幻灯片.
为了控制滑块周围的间距，最简单的方法是将其包裹在另一个可以直接定位的 div 中.
因此，采用您设置的尺寸/等，您的 HTML 将如下所示:
<div id="swipe_body"><div class="swiper-container swiper-threshold"><div class="swiper-wrapper" id="swiper-wrapper">
然后，您可以将这个 CSS 放入新的 div 目标并将其推到中间(使用 amrgin: auto 就像我在下面所做的那样，或者使用您似乎建议的设置保证金金额):
.slider-positioner{显示:块；宽度:550px；//将此设置为滑块的宽度高度:350px；边距:0px 自动；}
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屋！
