想在我的幻灯片控件中添加一个伪暂停按钮

Question

I'd like to add a pause button ~for my embedded media~ between my slide controls on the bottom-right of the page.

Because my slides go to the next upon completion of my embedded media, to pause the slideshow I'm using this element:

<button onclick="document.getElementById('player').pause()"> || </button>

This works perfectly when I insert it in my HTML file, but I am unsure where/how to place it so it stays between the next/prev slide controls, not resizing with the slide. Would prefer to do this with CSS and not JS.

Thanks for any help! I really appreciate it.

Answer 1

If you have access to the HTML, you should be able to place your button code between the next & previous buttons.

And then to style it, you would want to either create a CSS class or use inline styles with the following attributes & values: left: 30px; top: 26px; font-size: 25px; left: 30px; top: 26px; font-size: 25px;

The full code:

<button class="enabled" onclick="document.getElementById('player').pause()" style="left: 30px; top: 26px; font-size: 25px;"> || </button>

It would make it look like this:

I did try using the javascript document.getElementById('player').pause() . It didn't seem to work. I couldn't find any elements that had the ID of player . But if you've already had that working in the past, then I'm sure you'll be covered in that regards.