auto detect height

[Dobby89]

Feature Request:

Make it so the height of each slide is calculated automatically, instead of having to hard code the height inside idangerous.swiper.css.

This would be useful for mobile/responsive layouts where the width of images within the slideshow needs to be set at 100% to fill the full width of the screen. It isn't possible to know the resultant height of the image if you're using 100% width and so it can't be set within a separate CSS file as it currently is.

[nolimits4web]

Can you show me example of such case?

[Dobby89]

I hope this helps: http://dev.bespokeinternet.com/swiper/

Basically, imagine if you view a site on a mobile phone and you want the width of the slideshow to be 100%, but because every single screen will be a different width, the only way to achieve full width images is to give them width:100%.

I'm currently using Cycle2 http://jquery.malsup.com/cycle2/ on this website to get a responsive slideshow on mobile devices: https://www.outandoutoriginal.com/ (view on mobile phone). It's currently working fine in terms of responsive-ness EXCEPT it doesn't have touch detection for Windows, which is why I'm trying to get swiper working, which is a brilliant plugin, by the way!

[nolimits4web]

Ok, now i see, will try to implement it in upcoming Swiper 2

[nolimits4web]

At the moment you can use such temporary solution:

var swiper = $('.swiper-container').swiper(...options...)
$(window).resize(function(){
  //Unset height
  $('.swiper-container').css({height:''})
  //Calc Height
  $('.swiper-container').css({height: $('.swiper-container').find('img').height()})
  //ReInit Swiper
  swiper.reInit()
})

[Dobby89]

Thanks, I'll test this out when I can update the code and let you know how I get on.

[LarkinAngel]

That works for me...

Thank you!

[LarkinAngel]

Spoke too soon! It only works once the site is reloaded. On the first load the heights are messed up. How about you, Dobby89, did it work for you?

[Dobby89]

Sorry, I did test this out a few days ago but haven't had chance to reply.

I'm afraid I'm suffering the same issue as you, LarkinAngel. It only dynamically adjusts the height after the page is refreshed or the browser window is resized.

[nolimits4web]

"only dynamically adjusts the height after the page is refreshed or the browser window is resized."

I am just wondering when else it should adjust?

[LarkinAngel]

Is it possible to get the height right on the initial page load as opposed to reload?

[Dobby89]

Yes, as LarkinAngel says, it should know the height of the image inside the slide when the page is first loaded and set the height of the containing slide appropriately.

So if you set the width of the image to 100%, it should know how high the image will be. The height will be different from device to device, so it's not enough to resize on window resize or page refresh (even though you have this aspect working fine with the above fix).

[Dobby89]

I'm very impressed with how fast you respond to these issues! Great work so far. I'll check the new plugin out now :)

[nolimits4web]

Fixed and released in Swiper 2

[Magendiran]

Try this out... auto height for the contents

I used for tabbed slider

var tabsSwiper = new Swiper('.swiper-container',{
speed:500,
resizeReInit:true,
onSlideChangeStart: function(){
$(".TabbedPanelsTabGroup .TabbedPanelsTabSelected").removeClass('TabbedPanelsTabSelected')
$(".TabbedPanelsTabGroup .TabbedPanelsTab").eq(tabsSwiper.activeIndex).addClass('TabbedPanelsTabSelected')
var getHeight=$('.TabbedPanelsContent').parent().eq(tabsSwiper.activeIndex).height();
$('.swiper-container').height(getHeight);
//console.log(getHeight)
}

})
$(".TabbedPanelsTabGroup .TabbedPanelsTab").on('touchstart mousedown',function(e){
e.preventDefault()
$(".TabbedPanelsTabGroup .TabbedPanelsTabSelected").removeClass('TabbedPanelsTabSelected')
$(this).addClass('TabbedPanelsTabSelected')
tabsSwiper.swipeTo( $(this).index() )
})
$(".TabbedPanelsTabGroup .TabbedPanelsTab").click(function(e){
e.preventDefault()
})

$('.swiper-container').height($('.TabbedPanelsContent').parent().height());

[schmeiger]

Hey guys! Thanx for such a great job! :) I was wondering if it will be possible to make Swiper's container height to adjust to slide's heights? I have different HTML slides with different heights, one is like 300px high, other - 1200px. By setting calculateHeight: true it does get downsized, but only to the biggest slide. So on my first slide I have 900 px of blank space. Any suggestions? :)

[schmeiger]

hey! After playing for a longer time I came up with such solution:

var slideHeight = new Array();
slideHeight[0] = $('#slide-0').height();
slideHeight[1] = $('#slide-1').height();
slideHeight[2] = $('#slide-2').height();
slideHeight[3] = $('#slide-3').height();
slideHeight[4] = $('#slide-4').height();

    var mySwiper = new Swiper('.swiper-container',{
        pagination: '.pagination',
        loop:true,
        grabCursor: true,
        paginationClickable: true,
        onTouchEnd : function (){
            var active = $('.swiper-slide-active').attr('id');

            for(var i = 0; i < slideHeight.length; i++){

                var splitId = active.split("-");

                if(splitId[1] == i){
                    $('.swiper-container').css('height', slideHeight[i]);
                    $('.swiper-wrapper').css('height', slideHeight[i]);
                }

            }
        }
      });

My slides are an Array and their height is calculated before event Swiper is created. Otherwise their height is equal to the sum of all of them. It would be great if in a future version the height of the slide would be actually its real height and not a sum. :) Furthermore, would be nice just to have a property height (for container or wrapper height) is equal to slide height :)

[Novalis80]

for all in need, there is a more dynamic approach to the slider height reset:

var mySwiper = new Swiper('.swiper-container',{
    pagination: '.pagination',
    loop:true,
    grabCursor: true,
    paginationClickable: true,
    onSlideChangeStart : function (swiper){
        var activeSlide = swiper.activeSlide();
        var slideHeight = $(activeSlide).find('img')[0].height;

        $('.swiper-container').css('height', slideHeight);
        $('.swiper-wrapper').css('height', slideHeight);

        }
    }
  });

[coldpumpkin]

Novalis80 what if there's no image in the swiper, if it's just text?

[nolimits4web]

@coldpumpkin then you may wrap all your slide's text with div, and get its height as target slide height

[coldpumpkin]

What am I doing wrong? http://jsfiddle.net/bqq9e9hc/

[Hedgehogking]

@coldpumpkin , no jQuery in jsfiddle

[coldpumpkin]

Still http://jsfiddle.net/bqq9e9hc/1/

[Novalis80]

Looks like the hight is not set on Divs.
Try:

var paddingTop = 25; 
var slideHeight = $(activeSlide).find('.text')[0].offsetHeight +paddingTop;

[coldpumpkin]

Works :) Thank you!

[marlonamancio]

Hi guys, how can I achieve this now in 3.0.7 version, i tried http://stackoverflow.com/questions/25946896/swiper-height-auto-resize but doesn't work. Thanks!

[nolimits4web]

@marlonlamancio in the same way. Look at example of @Novalis80, then only difference is that:

var activeSlide = swiper.activeSlide();

should be

var activeSlide = swiper.slides.eq(activeIndex);

[GoToBoy]

swiper 3.0 not include "calculateHeight" api , why not?

[nolimits4web]

@GoToBoy because it is not required with flex box layout

[CXHub]

1. Why did you remove this option in the first place? Users could decide for themselfs to drop IE8 support by using flex-box.

2. Will there be an example where flex-box is used as dynamic height?

[nolimits4web]

@CXHub You probably didn't understand how the calculateHeight option worked in Swiper 2.x and what it was for, nothing similar with setting different slider height for different slide. If you want to support old browser, just use Swiper 2.x