Help with HTML for Google Slides

Jump to solution
ericwerth
Community Explorer

Hi everyone, 

I was hoping that someone with HTML experience might be able to help me with a bit of code I have been struggling with.  My goal is to create a rotating set of photos in a Canvas page and my thought was to do this through Google Slides.  I created and published the slideshow but when it plays, it does so with the Slides control bar beneath the photos where someone can move forward or back through the presentation.  I want to strip this out but evidently, this is not currently an option in Slides.

I found the snippet below online and it seems to work, with the caveat that if I change the size of the presentation at all, the Slides control bar reappears.  I currently can't find a way to do something like center it either.  

My knowledge of HTML is minimal.  I can read simple coding elements and change these to try and get the appearance I am looking for through trial and error, but that is about it currently.  If someone could let me know how the code below works to remove the control bar and if there is a way to change its location on a page or size without the control bar reappearing I would be very appreciative.  I could probably use an entirely different program that allows you to turn off controls and then display this in an iFrame, but since I use Drive a lot I was hoping to use Slides, although I am open to suggestions!  Basically, I have been taking out everything from <iframe to 5000 or whatever time designated and replacing this with a new slide show when needed.  

I don't want to take too much of anyone's time, so with any luck there is a fairly simple fix if you know HTML better!

Thanks in advance.

Eric

<div style="margin: 0 auto; width: 99%; height: 330px; overflow: hidden;"><iframe src="https://docs.google.com/presentation/d/e/2PACX-1vQvyWxDREQKT4gDE4i9da1H35E90PVAjhZKrsScHxndMzfg0fYp6..." width="588" height="358"></iframe></div>

1 Solution
laurakgibbs
Community Champion

Hi ericwerth‌ centering is easy; you can just add another style tag to your code like this:

text-align: center;

And then the height and width are just being controlled with the width and height variables, so take out the width and height in the styling and go with the fixed variables. 

So I made it bigger going from 588 to 735 and 358 to 448. I tested it here, and it seems to work! I really really REALLY like this idea, and I am absolutely going to steal it from you!!! 🙂

Testing Drive Slideshow: CanvasLIVE Playground 

<div style="margin: 0px auto; overflow: hidden; text-align: center;"><iframe src="https://docs.google.com/presentation/d/e/2PACX-1vQvyWxDREQKT4gDE4i9da1H35E90PVAjhZKrsScHxndMzfg0fYp6..." width="735" height="448"></iframe></div>

View solution in original post