CSS of a slide in swipe view - html

Question

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!

Answer 1

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