Styling troubles

[JayHoltslander]

Can you help me to understand what I'm experiencing?

idangerous.swiper-1.5.css
Slider size defined as 100% wide by 260px tall

mypage.html (temp inline styles)
body width matching slider width
.myslide class 300px wide by 148px tall with margins 20 10 20 0

What I get:
slides variable width wide by 240px tall with a 20px margin above (and presumably below), and 10px margin between slides

If I define the slider width & body width as 640px wide instead of 100% I get
213px wide by 240px tall with a 20px margin above (and presumably below), and 10px margin between slides

[JayHoltslander]

Screenshot...

[nolimits4web]

Hi Jay. Don't set margins on slides! It will not work. If you need visible margins between slides, add some container inside of slide and set margins/paddings to this elements. Also you can't set single slide's width, Swiper calculates it automatically. To have more than one slide pers swiper-container you need to use slidesPerSlide parameter on initialization.

For example your swiper-container width is 640px, and if you set slidesPerSlide equal to "2", then each slide will be 640/2 = 320 px wide.

Also, you can change this parameter dynamically after Swiper initialization like:

var swiper = $('.swiper-container').swiper({
  ...
  slidesPerSlide : 2,
  ...
})
// And then you can change it,  for example if your container became wider and you can fit there 3 slides:
swiper.params.slidesPerSlide = 3;
// Re-init slider to apply new settings:
swiper.init()

[JayHoltslander]

Sorry...
is that code snippet for inside the idangerous.swiper-1.5.js ?

Or in the page body like

<script type="text/javascript">   
var swiper = $('.swiper-container').swiper({
slidesPerSlide : 2,
})
</script>

[nolimits4web]

slidesPerSlide is the parameter that you should add when you initialize your Swiper, i suppose you do in body or in included JS script. That code snippet above is just the example of Swiper initialization that of course should be in your scripts/body and executed on document/window ready.