Swiper: Swiper miscalculates width and height when using percentages

[kokujin]

I really need the swiper to be resonsive in my Zurb Foundation grid so I am doing this:

/* Specify Swiper's Size: idangerous.swipers.css*/
.swiper-container, .swiper-slide {
width: 90%;
height:: 100%;
}

This does not calculate the widths and heights based on a percentage but makes them absolute pixel values out out them. The above creates the following values:
class="swiper-wrapper" style="width: 90px; height: 100px;" <-- note PX instead of percentages

class="swiper-slide" style="width: 22.5px; height: 100px;" <- havoc here, I have no idea why it now calculates 22.5px for the width and leaving the height at 100px. Anyway, both values are wrong.

Any ideas what I am doing wrong? Thanks

[nolimits4web]

I don't see your HTML and JS, but suppose that everything is correct. Why you need values of wrapper and slide in %?
If you have 1 slide per slide this means that your swiper-container is 90% width from the width of its parent container and at the moment its equal to 22.5px. Single slide is also 22.5px wide and wrapper is 22.5_4 = 90px. Everything is correct.
If you have 2 slides per slide, then your swiper-container is 45px wide. Single slide is 22.5px wide and wrapper is 22.5_4 = 90px. Everything is correct
If you have 4 slides per slide, then your swiper-container is 90px wide. Single slide is 22.5px wide and wrapper is 22.5*4 = 90px. Everything is correct

So i don't see what problem is?

[kokujin]

Maybe it#s the way I am dynamically adding slides? This is what I am doing

//Snip - this is in a custopm KO biinding

var swiper = new Swiper( '.' + $(element).attr('class')
, {
'slidesPerSlide': 4
//, 'disableAutoResize': false
, 'onSlideClick': showUserdetails
, 'grabCursor': true
//, 'slidesPerGroup': 4
, 'resizeEvent': 'auto'
, 'createPagination': false
});

var lenAllUsers = viewModel.allUsers().length;
if( lenAllUsers > 0){
for( var i = 0; i <= lenAllUsers; i++ ){
var username = viewModel.allUsers()[i].username;
var newSlide = swiper.createSlide('', 'swiper-slide',
'span');
newSlide.append();
swiper.reInit();
}
}

The images are automatically resized to width : 250px, height : 188px
using imagemagick. Swiper, rescales this data somehow and starts with the
wrong dimensions, if one resizes the browser, it resizes the width but not
the height and generates the following, Github seems to chew my HTML, so I
am only posting attributes.

class="swiper-wrapper" style="width: 819px; height: 100px;
-webkit-transform: translate3d(0px, 0px, 0px); -webkit-transition: 0s; (
The wrapper)
span class="swiper-slide" style="width: 204.75px; height: 100px;" ( all the
slides in span tags)
img data-id="2" src="/users/2/avatar" ( all the images in the spans)

On a desktop, the images are cut off, see the above generated dimensions from swiper, instead of the original 188px or 100%
height of the image, it shows only 100px, resizing on a mobile device shows
the whole image, buts then 100px, too high with images with a lot of white
space at the bottom, but the widths are ok.

Its actually the height calculation thats off, it seems the widths are
calculated correctly when the plugin is reinited or the browser registers a
size change

On Sun, Mar 17, 2013 at 6:44 PM, Vladimir Kharlampidi <
[email protected]> wrote:

I don't see your HTML and JS, but suppose that everything is correct. Why
you need values of wrapper and slide in %?
If you have 1 slide per slide this means that your swiper-container is 90%
width from the width of its parent container and at the moment its equal to
22.5px. Single slide is also 22.5px wide and wrapper is 22.5_4 = 90px.
Everything is correct.
If you have 2 slides per slide, then your swiper-container is 45px wide.
Single slide is 22.5px wide and wrapper is 22.5_4 = 90px. Everything is
correct
If you have 4 slides per slide, then your swiper-container is 90px wide.
Single slide is 22.5px wide and wrapper is 22.5*4 = 90px. Everything is
correct

So i don't see what problem is?

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

[nolimits4web]

Your code seems to be correct. For correct resize you can use .resizeFix() method instead of .reInit(). But don't use it inside of loop, call it after loop.

Swiper can't do nothing with your images. I suppose the problem is in CSS styles. I can say more specific if you show your live page

[kokujin]

Thanks Vladimir. I have tried using resizeFix() but that did not work
either. I am using the basic styles provided with Swiper-Slider and a
responsive grid, thats all. A freind of mine that I recommended Swiper too
is also having these problems. I cannot post any code at the moment because
I am using 2 template eniges(Backend and frontend) and the code is too
complicated to put in a pastebin.

is there some way to override the slide dimension calculation without
problems?

On Mon, Mar 18, 2013 at 7:53 AM, Vladimir Kharlampidi <
[email protected]> wrote:

Your code seems to be correct. For correct resize you can use .resizeFix()
method instead of .reInit(). But don't use it inside of loop, call it after
loop.

Swiper can't do nothing with your images. I suppose the problem is in CSS
styles. I can say more specific if you show your live page

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

[nolimits4web]

The problem is that you use % sizes and as you talk that it is fine on mobiles (in some cases) that i guess that problem in it, because i think that on mobile layout looks different (probably with media-queries). Swiper calc % sizes very well, we've built a lot of responsive apps with it without sich problems. So the problems with CSS, especially if you use Zurb, you should look there why it happens.

Or you can try to hardcode % height to px. Or you can redefine slider size after windows resize like:

$(window).resize(function(){
  $('.swiper-container').css({
    width: ..your width,
    height: ..your height
  })
  swiper.reInit() // or swiper.resizeFix()
})

P.S. you may not post here whole code, you can just send a link to your project so i can take a look

[kokujin]

On mobile devices, the widths are ok, but the heights are also calculated wrong because they dont resize, the heights stay in full desktop mode height. But even hardcoding the sizes in the idangerous.swiper.css file causes unwanted results, the reason why I wanted to use percentages in the first place.

[kokujin]

On Fri, Apr 5, 2013 at 9:42 AM, Sean McHenry [email protected]:

max-height: ''; /* largest height your images will be */

Thanks Sean, but does'nt that defeat the purpose of relative sizing using
percentages or EM values? I cannot use a dfinite height value because it
has to dynamically change when viewd on on mobile device.

[les2]

I just spent an hour or two pulling my hair out on this one. The problem was ... (are you ready) ...

Swiper needs to be initialized with an element that is attached to the DOM!

In my case, I was building a template in memory, populating an element given to me, which was later appended to the DOM (a Backbone View).

The behavior was similar to what is described here (I had the width set as a percentage "90%") but printing swiper.width resulted in "90".

[fxalvarezd]

Hi, I'm trying to implement a responsive swiper, but the height of the swiper is not being calculated properly.
I have set a basic example here: http://universalsolutionz.com/swiper/
The height of the slides is being set to 450px every time, no matter my screen size.
I'm trying to do something like:

.swiper1, .swiper1 .swiper-slide{
width: 100%;
height: auto;/_also tried with 100%_/
}

Thx!

[nolimits4web]

In your case, to make it fully responsive, you need to set 100% height and position:relative on .swiper-container, .swiper-slide, body, html, .swiper-main and .slider-wrap elements

[fxalvarezd]

@nolimits4web Thanks for your comment. Unfortunately I still have a problem, the height of the swiper is not the same as the height of my content. If you check out http://universalsolutionz.com/swiperheight/ you'll see that there's blue space below the content.

I wouldn't want to add 100% to the height of everything, specially the body in this case. I need to add more stuff below the swiper after :)

I would like the height of the entire swiper to be auto, and not set through js in pixels with a calculation that I can't really figure out.

[nolimits4web]

Hi it is not possible to make auto height on float elements (slides have floats). In your case you may calc slider width manually in js depending on difference, like:

//Your Swiper:
var swiper = $('....').swiper(...);
function fixSwiperHeight(){
  $('.swiper1').css({
    height: $(window).height() - $('.pagination').height()
  })
  swiper.reInit()
}
fixSwiperHeight()
$(window).resize(function(){
  fixSwiperHeight()
})

[fxalvarezd]

@nolimits4web you could set an auto height if the floated element were cleared. you could achieve this by setting an overflow hidden to the slides container or using the clearfix technique.
Thank you for your help, unfortunately this swiper won't work for me :(

[charlieblevins]

For anyone still having the problem with miscalculated width when using percentages, I solved it by using window.onload instead of document.ready.

[pakerou]

i need to add height : auto ( height change with the content ) in swiper-wrapper
I use the movie example
Can you help please?

[nolimits4web]

@pakerou did you try to play with calculateHeight and cssWidthAndHeight parameters?

[pakerou]

First Thank you Validimir for swiper,
I will try yep

[ShivkAgg]

Hey I am facing an issue am using swiper in ul li tags and its working fine but its shows li from center and I need it from top

any idea..?

[MrAndrianos]

I need direction! I use the latest swiper API version into an opencart template. The issue is the height of swiper-container. When i resize the screen the slides are cutting off !

[Filliposniper]

@nolimits4web I am having a hard time with my swiper height also, it scales responsively in width but it repeats the bg image on top and bottom. Here is the css i used any help is appreciated.

@media only screen and (max-width: 991px){ .swiper-slide { background-size: contain !important; background-repeat: no-repeat ! immportant; background-position: 0 50px !important; position: relative; } }

[Filliposniper]

I think i have found the solution. but then you have to play with your desired height but the background image will be responsive, to prevent bg image from repeating you have to use "background-size: cover" here it goes.

@media only screen and (max-width: 1170px){ .swiper-slide { background-size: cover !important; background-repeat: no-repeat ! important; background-position: 0 0 !important; } .swiper-container{ height: 600px; } }

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.