Integrating POWR.IO Image Slider widget in Hype

1

I need to integrate a fast adoptable image banner slider/carousel in an html fragment that I’m creating in Hype and that will be added on a branded landing page of a company website.

Since there is no slider or carousel item in the ‘Elements’ list of Hype, I first was thinking to create it via the timeline. But than I came across the POWR.IO image slider plugin: https://www.powr.io/plugins/image-slider

That would be a great solution to quickly add & edit slides without touching the html code.

I embedded the code in Hype via the ‘HTML Widget’ element, and it seems to work at first sight. Only design issue is that the HTML Widget component seems to have an 8px padding on the ‘body’ element of the html widget… Any idea how you can have this easily reset to 0?

Applying CSS rule on the body element of the widget element will also affect the main body element. And there is no class or id I can use to get rid of the unwanted 8px padding.

Any thoughts here? Or any other quick tips or best practices to easily embed a carousel/slider in Hype? I need to slide picture banners with an overlaying headline and subheading that are clickable towards a URL.

Thanks in advance!

2

You can set any CSS or HTML you want inside of the HTML Widget, so you could set:

<style>
body, html{ padding:0 !important; margin:0 !important; }
</style>

The !important setting makes sure that any CSS code the image slider is trying to set will be overridden. You'll want to enter this inside of the HTML widget -- the widget is an iframe, so you can include an entire webpage in it:

<!DOCTYPE html>
<html>
<head>
	<title></title>
 <style>
body, html{ padding:0 !important; margin:0 !important; }
</style>
</head>

<body>
 <!-- place your slider code here --> 
</body>
</html>

If that doesn't do the trick, can you share a document?

3

Dear Daniel,

thanks for reply below! It’s indeed resolving the padding issue.

Is this a good way to include slider functionality?

Or is their another quick and easy way to have

This is the sliding banner example we want to mimic in Hype:

https://werkenbijdeloitte.nl/

So only a few picture banners (about 5 in total) that has a heading and subheading/tagline. Each slider item should be clickable to a page URL.

Chrs,

Bert

4

I would have to see what you're doing first -- this seems like a completely fine way of displaying a slider. You may want to fade in the HTML widget since it will load after the Hype document loads. (But that's an aesthetic choice).

You may need to set your links so that they open with a target="_parent" -- without that, the URLs may open inside of the HTML widget.

5

Facing kind of same issue, did you get a way out yet buddy?

Regards,
R. Smith