Swiper: slidesPerView set to auto doesn't resize images (fluid)

[toddmotto]

Yo,

Here's my config:

var mySwiper = $('.swiper-container').swiper({
    slidesPerView: 'auto',
    keyboardControl: true,
    centeredSlides: true,
    calculateHeight: true,
    autoResize: true,
    mode: 'horizontal',
    loop: false
  });

Having an issue where when I resize, the images start to stack on top of eachother and will not resize to the viewport width, the dynamically created width remains at 714px (the image default width).

Is there any setting I am missing that fixes this? If I set the options to slidesPerView: 'auto' then the responsive/fluid resize works perfectly - just won't work with 'auto'.

[nolimits4web]

That is actually how CSS works, not a swiper problem. If you need to resize them, you can change swiper-slide width dynamically with script

[toddmotto]

Have you any examples at all of what CSS or JS is required for dynamic resizing? I tried enabling the options but it didn't quite work. Have tried playing with it last night but no results. Any help much appreciated.

[nolimits4web]

Can you give a link to your example and i will take a look? Or make a fiddle

[toddmotto]

Sure, would I be able to email you the link as it's for a client. Appreciate that if you can help, thank you very much.

[nolimits4web]

Sure, send me email

[toddmotto]

Thanks, I've dropped you an email to your Gmail :) thanks very much.

On 7 December 2013 17:34, Vladimir Kharlampidi [email protected]:

Sure, send me email

—
Reply to this email directly or view it on GitHubhttps://github.com/nolimits4web/Swiper/issues/498#issuecomment-30060035
.

Todd Motto | [phone]
Lead front-end engineer
toddmotto.com | @toddmotto

[nolimits4web]

Ok, i've looked. As i said it is a CSS problem, because wrapper has fixed width, they will not resize later. So you need to do it manually, like:

$(window).resize(function(){
  $('.swiper-slide').css({
    width: $(window).width() - 50 // 50px - you will have 25px edge from each side
  })
})

[toddmotto]

Thanks so much for taking a look, much appreciated. Awesome plugin, best I've found so far keep up the good work!

[keisersuze]

I am also interested . Can you post or send me the CSS solution please ?

Thanks.

[tiagoboeing]

Up