Can not place arrows within responsive slideshow widget

[bunnebunne]

Hi there,

I want to place the back / forward arrows over my hero image and make them invisible so you can klick into the right or left side to jump back or forth. As I place them above the hero image they are no longer behaving responsive. They are kind of pinned to one position and start pushing the caption down while shrinking the browser window width.

Is there a way to make the arrows behave responsive?

Thank you,

regards

Carsten

[Günter Heißenbüttel · Accepted solution]

That is doable, but it is quite tricky.

• Why can’t your approach work?

• The slide show heroes contain images, which scale proportionally (in width and height).
• The Prev/Next buttons are special instances of text boxes, which – as all text boxes – don’t scale proportionally, but only horizontally. They keep their vertical height, until the text within forces them, to grow in length, in order to keep the text within visible.
• If you reduce your browser window in width, the slideshow shrinks in both dimensions, the text box doesn’t and keeps its height. This is by design and expected behaviour. And this is, why your approach won’t work properly.

• How can you achieve, what you are expecting?
  • Use a composition widget instead, configure it as a slideshow, and hide the triggers behind the targets.
  • Composition targets normally scale only horizontally, but you can force them to scale proportionally by placing an image into it – and exactly this is, what you want to do.
  • Place the Prev/Next buttons over the image and delete the text frame („>“, „<„) within.
  • In the same way, as you did with the target, you can force the triggers and the Prev/Next buttons to scale proportionally, by placing an image – or in our case: an empty image frame – into it.
  • Now, the composition target and the Prev/Next buttons scale synchronously – just like you expected.

If this instructions are understandable and you managed to follow , you now should have the solution, you are looking for.

Here a „quick and dirty“ .muse file, which demonstrates this technique.

https://www.dropbox.com/s/z90jlipkxzrveeq/Slideshow-composition-invisible-triggers.muse?dl=0

[rachelr96825557]

I came across this through a google search because I was so aggravated with the way the arrows in a normal gallery were non-responsive and flying all over my page when resizing- not to mention it was effecting my page's mobile display in strange ways.

I can't begin to explain how much your post has helped! Though for beginners it will be probably be confusing to follow the steps or tinker with your downloadable sample, if one can follow it correctly, it is the exact responsive gallery that Muse should have made as its standard gallery widget to begin with.

I couldn't bring myself to purchase someone's widget on the web for something so seemingly simple, and this post helped me create it myself. Thank you so much! I hope others stumble across this.

[Günter Heißenbüttel]

Fine, if my post was helpful.

Nevertheless, I don’t think, that a slide show of this kind can’t be Muse’s standard slide show. It is much too particular for most users. And, if the get more experienced, they can build it by themselves.

By the way: If you like this kind of slide show, store it in your Library for easy re-use!