Need advice

[unematiii]

What would be the easiest way of adding horizontal gap between slides, say 20px, while preserving responsivness and without losing space (setting margin or padding decreases the width of the .slide div)?

I have

.slide {
    width: 100%:
    height: 100%;
}

and

$('.iosslider').iosSlider({
     // ...., 
    responsiveSlides : true,
    responsiveSlideContainer : true,
     //  ....
});

[marcwhitbread]

You want a 20px gap off screen in between slides?

[unematiii]

Actually slightly more, double than this. For 20px, I could just set padding-left & right. Unfortunately, adding more would shrink the div too much on small res. devices. I'm using v1.3.24 (12/19/2013, commercial licence).

[marcwhitbread]

What about bumping the .iosslider element out the extra px you need and adding margin-left/right to the slides? For small devices, use a media query to set the margin to something smaller.

It's still hard to visualize what you are trying to do so I apologize if I'm off base.

[unematiii]

Imagine you have a reponsive slider on iPhone (fills the entire screen), the .slide divs are positioned side by side if no margin or padding is applied. I could add 10px of padding to both sides, however I'd like the spacing between the slides to be at least 40px. Adding margins to right/left would just make the slide smaller and leave the extra empty space visible on screen.

[unematiii]

Would setting the margin(s) & manually resizing the .iosslider element to desired width (oldWidth + noOfSlides * 40) do the trick? When should I resize the container, on sliderLoad?

[marcwhitbread]

I think what you will need to do is create an element outside your slider:

<div class = 'bump-out'>
    <div class = 'inner'>

        <div class = 'iosslider'>...</div>

    </div>
</div>

And some LESS:

.bump-out {
    position: relative;
    width: 100%;
    overflow: hidden;

    > .inner {
        position: absolute;
        left: -20px;
        right: -20px;

        .iosslider {
            width: 100%; /* this will be clipped by the above left/right values */

            .slider {
                width: 100%;
                height: 100%;

                .slide {
                    width: 100%;
                    margin: 0 20px;
                }
            }
        }
    }
}

Maybe something like that?

[unematiii]

Thank you very much! That did the trick!