Title: [Plugin: Slideshow] Play, pause and arrow button Last modified: August 20, 2016 --- # [Plugin: Slideshow] Play, pause and arrow button * Resolved [asic](https://wordpress.org/support/users/asic/) * (@asic) * [13 years, 8 months ago](https://wordpress.org/support/topic/plugin-slideshow-play-pause-and-arrow-button/) * Hi, * I would like to change the buttons play, pause and arrows. I uploaded a nice button 225×225 changed the css path but i missing somethings, because the buttons remain the little size as usual. * Thanks * [http://wordpress.org/extend/plugins/slideshow-jquery-image-gallery/](http://wordpress.org/extend/plugins/slideshow-jquery-image-gallery/) Viewing 10 replies - 1 through 10 (of 10 total) * Plugin Author [Stefan Boonstra](https://wordpress.org/support/users/stefanboonstra/) * (@stefanboonstra) * [13 years, 8 months ago](https://wordpress.org/support/topic/plugin-slideshow-play-pause-and-arrow-button/#post-3074252) * Hi Asic, * If you set the slideshow style to ‘Custom’, you can see in the `.slideshow_container. button` class that the buttons have a predefined height and width. Also, they move up half their height so they center vertically. * On a sidenote: The buttons are sprites in the predefined cases, which means that both the left and right button are in one image. That’s why the next button has a background positioning of `background-position: -19px 0;`. * If you want to add a 225×225 button, your CSS should probably look like this ( assuming you’re not working with sprites): * ``` .slideshow_container .button { margin-top: 112px; /** Center vertically */ height: 225px; width: 225px; } .slideshow_container .previous { background: url('[your-image-path]/previous.png') no-repeat; } .slideshow_container .next { background: url('[your-image-path]/next.png]') no-repeat; } ``` * Best regards, Stefan * Thread Starter [asic](https://wordpress.org/support/users/asic/) * (@asic) * [13 years, 8 months ago](https://wordpress.org/support/topic/plugin-slideshow-play-pause-and-arrow-button/#post-3074376) * Hi Stefan, * could you please give some help for the play, pause button?? * Thanks * Plugin Author [Stefan Boonstra](https://wordpress.org/support/users/stefanboonstra/) * (@stefanboonstra) * [13 years, 8 months ago](https://wordpress.org/support/topic/plugin-slideshow-play-pause-and-arrow-button/#post-3074377) * Sure! what do you need? * Thread Starter [asic](https://wordpress.org/support/users/asic/) * (@asic) * [13 years, 8 months ago](https://wordpress.org/support/topic/plugin-slideshow-play-pause-and-arrow-button/#post-3074378) * I cant show the 225×225 play7pause button that i’ve uploaded * here my slideshow css: * .slideshow_container { } * .slideshow_container .slideshow { } * .slideshow_container img { height: 200px !important; border: 1px solid #509AC9! important; } * .slideshow_container .slide { margin-right: 2px; } * .slideshow_container .description { background: #FFFFFF; } * .slideshow_container .controlPanel { width: 21px; height: 21px; background: # 000; border-radius: 2px; -moz-border-radius: 10px; } * .slideshow_container .controlPanel ul { } * .slideshow_container .controlPanel ul li { margin: 3px; width: 15px; height: 15px; } * .slideshow_container .controlPanel ul li:hover { } * .slideshow_container .play { background: url(‘%plugin-url%/images/SlideshowPlugin/ play-pause.jpg’) 0 0 no-repeat; } * .slideshow_container .pause { background: url(‘%plugin-url%/images/SlideshowPlugin/ play-pause.jpg’) -15px 0 no-repeat; } * .slideshow_container .button { margin-top: -20px; height: 40px; width: 19px; background: url(‘%plugin-url%/images/SlideshowPlugin/light-arrows.png’) no-repeat;} * .slideshow_container .previous { } * .slideshow_container .next { background-position: -19px 0; } * .slideshow_container a { text-decoration: none; color: #509AC9; text-align: center; } * .slideshow_container .description h2, .slideshow_container .description p { color: #509AC9; } * .slideshow_container h2 { margin: 0px; font-size: 18px; } * .slideshow_container p { margin: 7px; font-size: 15px; } * Plugin Author [Stefan Boonstra](https://wordpress.org/support/users/stefanboonstra/) * (@stefanboonstra) * [13 years, 8 months ago](https://wordpress.org/support/topic/plugin-slideshow-play-pause-and-arrow-button/#post-3074379) * Assuming you uploaded two images with the size of 225×225 pixels, named play. jpg and pause.jpg, which you placed on your website, you should be able to achieve showing the new play and pause buttons by adapting the CSS classes to look like this: * ``` .slideshow_container .controlPanel ul li { margin: 3px; width: 225px; height: 225px; } .slideshow_container .play { background: url('www.yoursite.com/youruploadfolder/play.jpg') no-repeat; } .slideshow_container .pause { background: url('www.yoursite.com/youruploadfolder/pause.jpg') no-repeat; } ``` * Keep in mind though, that you will have to replace ‘www.yoursite.com’ with your own website’s address, and ‘youruploadfolder’ should be replaced with the folder you uploaded the files to. * Were you able to change the next and previous buttons? * Thread Starter [asic](https://wordpress.org/support/users/asic/) * (@asic) * [13 years, 8 months ago](https://wordpress.org/support/topic/plugin-slideshow-play-pause-and-arrow-button/#post-3074380) * Yes Stefan * now it’s all ok.. * Thanks a lot * Asic * Plugin Author [Stefan Boonstra](https://wordpress.org/support/users/stefanboonstra/) * (@stefanboonstra) * [13 years, 8 months ago](https://wordpress.org/support/topic/plugin-slideshow-play-pause-and-arrow-button/#post-3074381) * That’s great to hear, anytime! * [gblanc](https://wordpress.org/support/users/gblanc/) * (@gblanc) * [13 years, 5 months ago](https://wordpress.org/support/topic/plugin-slideshow-play-pause-and-arrow-button/#post-3074453) * Hi, * I would like to prevent the slide show to start automatically and let the user decide to start using the arrow keys or the start/stop button. * Thank you for this very nice plugin. * GBlanc. * Plugin Author [Stefan Boonstra](https://wordpress.org/support/users/stefanboonstra/) * (@stefanboonstra) * [13 years, 5 months ago](https://wordpress.org/support/topic/plugin-slideshow-play-pause-and-arrow-button/#post-3074454) * Hi GBlanc, * You can do this by setting ‘Automatically slide to the next slide’ to ‘No’ and setting ‘Show control panel (play and pause button)’ to ‘Yes’ in the slideshow’s settings box. * The buttons can be set to active by setting ‘Activate buttons (so the user can scroll through the slides)’ to ‘Yes’. Clicking the ‘Next’ and ‘Previous’ button won’t make the slideshow start playing. It’ll just slide to the next or previous slide, once. * Best regards, Stefan * [gblanc](https://wordpress.org/support/users/gblanc/) * (@gblanc) * [13 years, 5 months ago](https://wordpress.org/support/topic/plugin-slideshow-play-pause-and-arrow-button/#post-3074455) * Yes Stefan * Now everything is ok.. * Thanks a lot. Your plugin does exactly what I was expecting. * GBlanc. Viewing 10 replies - 1 through 10 (of 10 total) The topic ‘[Plugin: Slideshow] Play, pause and arrow button’ is closed to new replies. * ![](https://s.w.org/plugins/geopattern-icon/slideshow-jquery-image-gallery_d3d2de. svg) * [Slideshow](https://wordpress.org/plugins/slideshow-jquery-image-gallery/) * [Frequently Asked Questions](https://wordpress.org/plugins/slideshow-jquery-image-gallery/#faq) * [Support Threads](https://wordpress.org/support/plugin/slideshow-jquery-image-gallery/) * [Active Topics](https://wordpress.org/support/plugin/slideshow-jquery-image-gallery/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/slideshow-jquery-image-gallery/unresolved/) * [Reviews](https://wordpress.org/support/plugin/slideshow-jquery-image-gallery/reviews/) * 10 replies * 3 participants * Last reply from: [gblanc](https://wordpress.org/support/users/gblanc/) * Last activity: [13 years, 5 months ago](https://wordpress.org/support/topic/plugin-slideshow-play-pause-and-arrow-button/#post-3074455) * Status: resolved