html - CSS of a slide in swipe view -

i working in phone gap using java script,html , css. have implemented swipeview using this.

my doubt how should css be.the css implemented 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 left right.when reaches last slide.the movement reverses. when,i change margin-left:0; 0 5...as , when slide left space gets on adding last slide seen half of screen.

but,when give margin-left:0; stuck 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 give such n-number of swipes slides should same position-middle of screen.

please,guide me!

if understand correctly, you're trying slider sit in middle of screen, in doing you're adding margin slider elements itself. correct?

if so, reason you're having trouble slider implementation uses margins position slides during movement left/right.

in order control spacing around slider, easiest bet wrap in div can traget directly.

so, taking dimensions/etc you've set up, html instead 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 drop css in target new div , push middle (either using amrgin: auto have done below, or using set margin amounts seem suggest like):

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