Slider Height not flexible

See original GitHub issue

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?

Issue Analytics

  • State:closed
  • Created 11 years ago
  • Comments:14 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
nolimits4webcommented, Jan 28, 2013

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();
0reactions
lock[bot]commented, Jun 26, 2018

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

FlexSlider Auto Height still leaving a space below slider
I have auto height on my flexslider and its still leaving a space below it. I have applied a background colour to the...
Read more >
Splide - The lightweight, flexible and accessible slider/carousel
Splide is a lightweight, flexible and accessible slider/carousel, ... slider requires the height or heightRatio option to determine the slider height.
Read more >
Nectar Slider Plugin - Salient Documentation
The flexible height option will require you to enter a slider height that may be different than your actual image height because it...
Read more >
"Nectar style slider gallery size issue" (#297724) / ThemeNectar
The flexible slider height option makes the Nectar Slider respond perfectly to ensure there's no clipping on any view - leaving it off...
Read more >
Center responsive slider + keep height fixed and ... - Themeco
Hi there,. Thanks for writing in. That's a bit complex, it's like you're trying to flexible and not flexible at the same time...
Read more >

github_iconTop Related Medium Post

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