I have a slideshow that has different amounts of text on each of the slides. As a result, some slides need more height than others to accomodate the amount of text. Unfortunately, on the slides that need less text than the others, this results in a lot of white space below the text.
I’d like to reduce the height of the slideshow dynamically depending on where the text stops in each slide, so that there is not unnecessary white space below the text, but that it adapts for the text-heavy slides.
I’ve looked into doing this with a collapse function, but can’t seem to figure it out.
For clarity, image below is a slide with less text. You’ll see because the bottom of the slideshow is lower to accomodate text on other slides (see next image), there is lots of white space. I just want to dynamically change the height of the slideshow depending on the last element in it.
I don’t think it’s possible with this particular component. All slideshow images are stored in the box, which has fixed height.
What you can do instead is putting your content to the database and connect it to the dynamic page. The content for each page will be passed dynamically from the database and you can append arrows to switch between them as well.
Viktoria, thank you so much for taking time to respond– I really appreciate it! This solution doesn’t quite work for me and the purpose of the site, but thank you again!
Sorry, follow-up question. The benefit of the slideshows is that I can make them full-width, so they expand with changing screen sizes. Some of my slides are different in background colour. Is there a way to either make the state boxes full width, or to dynamically change the page background (not the state box background) depending on which state the user is on?
And once you identified a new state, change the page background using (you can crate a one-pixel image with the desired color and assign it to the document. You can also use a third party to get such an image. Heath had a tutorial about using 3rd party for that): https://www.wix.com/corvid/reference/$w.Document.html#background
@jonatandor35 Sorry if this is a dumb question, I’m not a coder.
I have buttons on each state that use an onClick to advance the state to the next state. Could I not add a line of code in the onClick exportfunction that changes the page background to a HEX colour when they get to that state?
@atallahvincent you can use the onClick(). But you can’t just change the background hex (unfortunately Corvid doesn’t support this feature yet. I don’t know why. This should be super easy for them to develop). however, there is a work around - Corvid lets you use an image as background. So prepare an image with the desired background and use:
//inside the onClick():
$w("Document").background.src = "YOUR IMAGE SOURCE";
Or ask @Heath how to use the 3rd party (it’s easier because you can then just set the HEX).
@jonatandor35 Grr. Wish Wix would make some more basic functions available. It looks like @Heath isn’t tagging someone. Is there a way for me to tag him?
@deleteduser Sorry guys I’m a super rookie. What do I replace ‘Document’ with? For reference, here’s the onClick code. Would be SUPER grateful if you could fill it in lol.
export function startbutton_click(event) {
$w("#bc").changeState("Q1");
$w("#bc").scrollTo();
}
Me again lol. Now, my scrollTo(); isn’t working. I want the onclick to trigger a scroll to top of page, but it’s scrolling to top-ish of the state box instead. Any advice?
@atallahvincent at the top of the entire code write:
import wixWindow from ‘wix-window’; //I’m typing on my iPhone so make sure to use the correct quotation signs. iPhone has a wired apostrophe
then instead of your current scroll:
wixWindow.scrollTo(0,0, {scrollAnimation: false});//or true. Whatever you choose
