Slider Height not flexible

[NeoMudaly]

I have

<div class='swiper-slide'>
    <div>Image</div>
    <div>Description</div>
</div>

Following setup for the responsive Swiper, the height no longer works.
If I set height to 100%, then I get whitespace caused by the slides stacking.
Height:auto , same result. It seems that a pixel value is always set, locking the height.
Am I missing an option or css that allows the height to flex?

[nguaman]

i have the same issue!,
I solved it with js.

/* FULLSCREEN SWIPER*/
$(window).resize(function(){
    var height = $(window).height();
    var width  = $(window).width();
    $('.swiper-container, .swiper-slide').height(height);
    $('.swiper-container, .swiper-slide').width(width);

})
$(window).resize(); 

[nolimits4web]

Please understand that according to simple CSS rules element with height:100% will fit to parent's element height. If swiper wrapped with another element then it will not work. So if swiper is a child of BODY, then this will enough:

html, body, .swiper-container {
    height:100%;
    position:relative;
}

Otherwise yes, it is better to use with script like in example of Wu4m4n, but i would recommend to enhance it with:

/* FULLSCREEN SWIPER*/
$(window).resize(function(){
    var height = $(window).height();
    var width  = $(window).width();
    $('.swiper-container, .swiper-slide').height(height);
    $('.swiper-container, .swiper-slide').width(width);
    //Add reInit, because jQuery's resize event handler may occur earlier than Swiper's one
    swiper.reInit()
})
$(window).resize();

[nguaman]

good point!
Maybe you could add the ability to have the slider in fullscreen, because I think most people like the transition effect of multiple screens.

On one screen you have a form, on another screen have a add, etc..

For example I have an examiner with datatables 1.9.4. (and cakephp 1.3)
And when I generate a new record I create a new slider, and it looks spectacular. (and not to mention that is compatible with iPad).

Only a vision.

Greetings!.

[NeoMudaly]

Thanks Wu4m4n, nolimits4web

The fullscreen approach is great but not really where I was going. What I'm interested in is how to achieve a flexible height in a dynamic container. At the moment, if I don't specify a CSS height, Swiper calculates a height of all slides stacked. If I set the mode to 'horizontal', I would expect the Swiper height to be that of the tallest slide....not stacked...

Is there a way to get the height of the active slide and then set that as the Swiper height?
I've had a look at mySwiper.currentSlide() but can't seem to get the height out of it (maybe I'm just doing it wrong - wouldn't be the first time!)

My thinking is to get the height of the initial slide, set that to the Swiper height. Then onSlideChangeStart get the height of the next slide and set this as the new Swiper height. It can then be linked to a window resize(). Does this sound feasible?

By the way, really cool work on this plugin

[nolimits4web]

@NeoMudaly. I suppose you are trying to make it like pages that may have different height and to be able to let user scroll it, right?)) There is a solution for you:

//First of all unset slide's height:
$('.swiper-slide').css({height:''auto})
//Height of new active slide:
var newHeight = $(mySwiper.currentSlide()).height()
//Set new Height to slides and slider:
$('.swiper-container, .swiper-slide').css({ height : newHeight })
//And call reInit:
mySwiper.reInit()

About fullscreen option. I'm working on ready to use robust fullscreen Swiper app that will match your needs, hopefully it will be released soon

[aroxenhag]

About the swiper app you're working on, will it have internal scrolling of the pages? I might misunderstand your tip above but it looks like you're setting the size of the whole container to the size of the current page. That means that when you scroll down a page and then swipe to another page, that other page will be scrolled down as well, which is weird.

I have tried to build a similar thing with swiper where you scroll sideways between pages, with each page having a vertical swiper in freeMode. It is hard to get the vertical scroller to work ok though, as you need to allow the content of the page to render to its full height. Most examples on the demo page use fixed widths. You say swiper supports responsive design but there are few examples.

Btw, I'd like the pages to be able to internally have inline image galleries using swiper. Haven't tried nested swipers with swiping in the same direction yet but I suppose it should be supported.

Anyway, looking forward to see the fullscreen app. Thanks for a great lib.

[nolimits4web]

@andersroxenhag Yes, when using method above then pages will "jump" after swiping between them, and this is not a best way.
Your idea about vertical Swiper inside with freeMode is almost correct, but you also need to enable scrollContainer and its combination with scrollbar plugin will do the native-like behaviour. This method will be used in a full screen app.
And no problems with nested swipers with same direction, but you should just keep the space outside of nested one to be able to scroll main pages.

[aroxenhag]

Sounds great, I'll try out the scrollContainer property. Think I used that before but missed it in my latest attempt. Thanks.

[MentalGear]

Hi,
just wanted to say that I also run into the height: 100% bug and literally spend days to fix it. VERY nasty, now trying to make it work using your code here guys.
I would also support that in the next version there should be some kind of a automatic fix for this.
ALSO, great work nolimits4web !

EDIT:
html, body, .swiper-container {
height:100%;
( position:relative; )
}
Fixed it for me !
Actually html and body also need 100% height, thx guys !

[NeoMudaly]

@nolimits4web I have it working now with the code you suggested. Awesome, and great work on this!!

[anarqz]

Fixed my problem using the following in "onSlideChangeStart"

onSlideChangeStart: (swiper)->
    $(swiper.slides).each ->
        $(this).css height: if $(this).index() != swiper.activeIndex then 0 else 'auto'

Setting the "hidden" slides height = 0 and active slide height = auto on change start should fix the problem.

[yogesh131jadhav]

@nolimits4web

Its really nice slider. I am using this slider.
I have one problem while using this slider with onSlideChangeStart.

I have 2 slides in slider.
When I shift from one slide to another. Actual the event should fire but its not getting fire.
While I trying to slider 2 to 3 (3rd slide not present) or trying to slide to before 1st the action raised.

Please suggest something.
Waiting for response.

Thanks

[yogesh131jadhav]

Fixed my problem.
Problem was occurred due to written the function in document.ready()
when I picked that function out problem gets resolved.

// Working Code
var mySwiper = new Swiper('.swiper-container',{
   onSlideChangeStart: function(swiper){
       setSwiperHeight();
   }
})

// Not Working Code
$(document).ready(function(){
  var mySwiper = new Swiper('.swiper-container',{
     onSlideChangeStart: function(swiper){
         setSwiperHeight();
     }
  })
})

[lock]

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.