Automatic height about swipeshow

[rstacruz]

Sorry, this was never explicitly accounted for! However, it should respond
well to having the height set via js:

$('.your-slideshow').css({ height: 200 });

On Monday, April 1, 2013, o-l-e wrote:

Hi, and compliments on a nice simple slider.

I am trying to make the slider responsive, with variable sized content.
Everything works well, but the height is really tricky.
Is it possible to somehow "make the slider the height of tallest image"?
It seems the slider needs a set height in the css, which is a bit tricky
when the width (also css) is set to for example 100%.

Hope you understand the question :)

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/4
.

[o-l-e]

Hm, this is still a bit tricky.
The ideal idea would be to allow for the slides to be 100% width, while the height of the slider would be resized according to either a. the active slide, or b. the tallest slide of the slides in each individual slider.
I think the first option would be the best.
What do you think, is this achievable?

Sort of something like this thing: http://webbies.dk/assets/files/SudoSlider/package/demos/autoheight.html

Thing is i am trying to make a blog-type page with several sliders mixed with blocks of text and with variable height.

[rstacruz]

Sounds like something you can do with this:

$(".your-slideshow").swipeshow({
  onactivate: function(current, i, previous, j) {
    // `current` refers to the current `.slide` that is active.
    // `this` refers to the `.your-slideshow` we started with on line 1.
    $(this).css({ height: $(current).height(), transition: 'height 300ms ease' });
  }
});

...I haven't tested out the code, but something like that should work.

[rstacruz]

From a design perspective, I'd ask you to reconsider, though. Seems like an annoying effect :)

[o-l-e]

Hi there, and sorry for the late reply.
I have not had time to try it out, but i will let you know how it turned out :)

[o-l-e]

Hi again,

i have tried out your suggestion, but i simply can't get it to work.
Do you have any other suggestions by any chance?

As i explained earlier i am trying to create a one page type website, with multiple sliders with variable heights.
Thanks for any advice :)

[rstacruz]

Try adding .find('img'):

$(".your-slideshow").swipeshow({
  onactivate: function(current, i, previous, j) {
    $(this).css({ height: $(current).find('.img').height(), transition: 'height 300ms ease' });
  }
});

[OneMohrTime]

@o-l-e I was just recently able to finally overcome this by assinging 'height' to 'auto', and then assigning psuedo elements to maintain a certain aspect ratio.

You can find the (hack?) on CSS Tricks, plus LESS/SCSS mixins.
https://css-tricks.com/snippets/sass/maintain-aspect-ratio-mixin/

Let me know if this worked for you, hoping it wasn't just a fluke of some other element I have mixed in.

[o-l-e]

Sorry @OneMohrTime i didn't end up pursuing this any further, so i ended up using another slider. But thanks so much for your input, and hope somebody else finds it useful :)