question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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'.

Issue Analytics

  • State:closed
  • Created 10 years ago
  • Comments:10 (4 by maintainers)

github_iconTop GitHub Comments

3reactions
keisersuzecommented, Apr 23, 2015

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

Thanks.

0reactions
tiagoboeingcommented, Jan 30, 2018

Up

Read more comments on GitHub >

github_iconTop Results From Across the Web

Swiper slider not working unless page is resized
Swiper's sliders, in order to work properly, requires you to either: Initialize them when they are visible; Update them when they get ...
Read more >
Insert and edit images in Dreamweaver - Adobe Support
Learn how to insert, edit, replace, and resize images and image placeholders in your web pages in Dreamweaver.
Read more >
Auto resize image to fill container div - JavaScript - SitePoint
I'm working on a fluid-layout website with two main divs side-by-side at 50% width each. One of these divs is split horizontally with...
Read more >
Changing the slidesPerView parameter from 1 to auto ... - Muut
Hello, I would like to change the slidesPerView parameter on so I can ... slidesPerView from 1 to 'auto' does not shrink the...
Read more >
Fluid Images | Email Design Reference
Fluid Images. Having your images resize on small screens is one of the most important benefits of using media queries, especially where email...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found