Need a bit of help with a fluid responsive slider

[heronymo]

Hi,

I've been trying to get a slider to be as fluidly responsive as possible, while also affecting it's outer containing div. I'll outline the goals first and then the steps I've already taken (which have failed, which is why I'm here lol). And finally, I'll provide a fiddle with where my code is currently at.

Goals To have bee3D--parent's height be the height of the tallest slide (so that the outer containing div doesn't change height when the slide index changes). To have bee3D--parent's height affect the hight of the div it resides in. To have a fluid responsive behaviour, instead of "jumpy" breakpoints. Meaning, as the window gets narrower, the slider area gets narrower. The content within each slide will either get smaller (image) or go onto more lines (text). The change in the slide content's height should therefore affect the bee3D--slide, and in turn the bee3D--parent, and in turn the main containing div. To have the bee3D--slides and bee3D--parent not have fixed heights.

Actions Taken I've tried the following code, but it doesn't seem to work on my slider for some reason, and I can't figure out why: https://jsfiddle.net/lukeed/budth6a4/ I was taking a look at this implementation as well, but it uses "jumpy" breakpoints and all the slides are the same height. I could not adapt it properly: https://bioscibd.com/effective-royalty-rates#7

I've successfully been able to get my sliders to be fluidly responsive with my own code, but the main issue that remains is that the slider isn't properly affecting the height of the div that it's residing in.

Fiddles I've been able to get it responsive up to this point, but the bee3D--parent isn't affecting the div it resides in.

I have a feeling it's something obvious that I'm missing.

Any insight would be greatly appreciated. I'll continue to try to fix this, and post a solution if I find one in time. Thanks so much for your time.

Fiddle 1 - 2 stacked, synced sliders. One "cover flow" and one "classic" slider. https://jsfiddle.net/heronymo/jf6z9kmu/10/

Fiddle 2 - a regular "classic" slider https://jsfiddle.net/heronymo/56okr71u/4/

[lukeed]

Hey, thanks for the detailed issue! Makes it really easy to help... especially the Fiddle 😉

Here's a fork of your fiddle. There are a few lines at the top of init code.

[heronymo]

Thanks Luke!

I hadn't considered a JS solution. Appreciate the insight. I've implemented the code additions and it's working. Just need to adapt it to the other sliders, which should be straightforward.

If I have any issues I'll be back :)

Just thought of something, is there a fade effect addon for slide transitions?

[lukeed]

No problem!

You can move that bit into a function and call it on any slider.

For the fade, just need a little bit of css. Active slide is opacity:1 while the others are 0, I assume. Just gotta play with how you want them to move into each other, if at all.

[heronymo]

Cool. I can add that CSS easily. Do you think I'd actually need to be using bee3D to do a fading slideshow banner? Since the images would have to be stacked on top of one another. Is there a way to position them like that with bee3D? It could be easily done using a small bit of JS anyway I suppose, without using the full slider.

This would basically be a fading photo slideshow.

[lukeed]

Hey, if you're already using Bee3D on the same page, I would. The code is already there, so might as well not duplicate it.

But, on its own, you don't really need Bee3D there. The library essentially just cycles through classNames efficiently, as well as providing some interactions/listeners for navigating through the slide deck.

[heronymo]

Cool thanks! I'll give this a try.

[lukeed]

Unless mistaken, going to close this because I think we've covered your questions.

Thanks!