CSS of a slide in swipe view

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

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