Title: Pause button
Last modified: March 31, 2023

---

# Pause button

 *  Resolved [prccp](https://wordpress.org/support/users/prccp/)
 * (@prccp)
 * [3 years ago](https://wordpress.org/support/topic/pause-button-6/)
 * Is there a way to add a pause button.
 * Thanks in advance!
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fpause-button-6%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 4 replies - 1 through 4 (of 4 total)

 *  [Ketan Patel](https://wordpress.org/support/users/patelketan/)
 * (@patelketan)
 * [3 years ago](https://wordpress.org/support/topic/pause-button-6/#post-16623836)
 * Hello,
 * I’m sorry for the inconvenience, it’s not possible to add a pause button.
 * Thanks,
 *  Thread Starter [prccp](https://wordpress.org/support/users/prccp/)
 * (@prccp)
 * [2 years, 11 months ago](https://wordpress.org/support/topic/pause-button-6/#post-16712118)
 * So I’ve made it work after reading up on the Slick Slider documentation.
 * 1) First create a Cover block and insert the slider and a Blocks button inside
   it.
 * 2) Then add the class “_playpause_” to the **Buttons** block and a link the **
   button** as the example below.
 *     ```wp-block-code
       <div class="wp-block-buttons playpause"><!-- wp:button -->
       <div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="#">Pause</a></div>
       <!-- /wp:button --></div>
       ```
   
 * 3) Then add the following script:
 *     ```wp-block-code
       $('.wp-block-cover__inner-container').on('click', '.playpause a', function(e) {
       	e.preventDefault();
       	var slider = $(e.currentTarget).closest('.wp-block-cover__inner-container').find('[id^="wpsisac-slick-slider"]');
       	var button = e.currentTarget;
       	$(button).toggleClass('paused');
       	if (button.innerText == "Pause") {
       		button.innerText = "Play";
       		slider.slick('slickPause');
       	}
       	else {
       		button.innerText = "Pause";
       		slider.slick('slickPlay');
       	}
       });
       ```
   
 * 4) Stylize it.
   In my case I made the text disappear for sighted users, but kept
   it accessible for screen readers, then added a visual “Play/Pause” switch, and
   finally positioned it on top of the slider. That part will vary depending on 
   implementation.
 *     ```wp-block-code
       .wp-block-buttons.playpause {top: 13% !important;left: 0;position: absolute;padding: 40px;z-index: 1;}
   
       .wp-block-buttons.playpause .wp-block-button {font-size: 0;}
   
       .wp-block-buttons.playpause a.wp-block-button__link.wp-element-button {background: transparent;color: transparent;}
   
       .wp-block-buttons.playpause a.wp-block-button__link.wp-element-button::after {content: '';border-style: solid;box-sizing: border-box;display: block;width: 12px;height: 16px;}
   
       .wp-block-buttons.playpause a.wp-block-button__link.wp-element-button:not(.paused)::after {border-width: 0 3px;border-color: #262A31;}
   
       .wp-block-buttons.playpause a.wp-block-button__link.wp-element-button.paused::after {border-width: 8px 0px 8px 16px;border-color: transparent transparent transparent #262A31;}
       ```
   
 * The reason I’m implementing the Pause/Play button is because of [accessibility](https://www.w3.org/WAI/WCAG21/Understanding/pause-stop-hide).
   Hope it helps everyone and feel free to ask me anything related.
 * Here’s a screenshot of how it looks:
 * ![](https://i0.wp.com/www.fundacaoitauunibanco.com.br/wp-content/uploads/2023/
   05/pauseplay.jpg?ssl=1)
 *  [Ketan Patel](https://wordpress.org/support/users/patelketan/)
 * (@patelketan)
 * [2 years, 11 months ago](https://wordpress.org/support/topic/pause-button-6/#post-16714114)
 * Hello,
 * 
   Thanks for the suggestion. we will check and discuss this functionality with
   our team but if we have provided an autoplay parameter then you are managed easily
   slider play and stop functionality but we will discuss with our team.
 *  Thread Starter [prccp](https://wordpress.org/support/users/prccp/)
 * (@prccp)
 * [2 years, 11 months ago](https://wordpress.org/support/topic/pause-button-6/#post-16714128)
 * Thanks for the consideration, Ketan!
 * About the autoplay, the problem is the current implementation goes against accessibility
   guidelines. You can read up more on the WCAG [Understanding SC 2.2.2: Pause, Stop, Hide (Level A)](https://www.w3.org/WAI/WCAG21/Understanding/pause-stop-hide)
   page.
 * Accessibility is one of the biggest problems with Slick Slider and widely discussed
   since is the major slider library used across the globe. But there are ways to
   make it better. And your implementation on WordPress was very good. Kudos to 
   you/your team!
    -  This reply was modified 2 years, 11 months ago by [prccp](https://wordpress.org/support/users/prccp/).

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Pause button’ is closed to new replies.

 * ![](https://ps.w.org/wp-slick-slider-and-image-carousel/assets/icon-128x128.png?
   rev=1443298)
 * [WP Slick Slider and Image Carousel](https://wordpress.org/plugins/wp-slick-slider-and-image-carousel/)
 * [Support Threads](https://wordpress.org/support/plugin/wp-slick-slider-and-image-carousel/)
 * [Active Topics](https://wordpress.org/support/plugin/wp-slick-slider-and-image-carousel/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/wp-slick-slider-and-image-carousel/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/wp-slick-slider-and-image-carousel/reviews/)

## Tags

 * [button](https://wordpress.org/support/topic-tag/button/)
 * [pause](https://wordpress.org/support/topic-tag/pause/)
 * [play](https://wordpress.org/support/topic-tag/play/)

 * 4 replies
 * 2 participants
 * Last reply from: [prccp](https://wordpress.org/support/users/prccp/)
 * Last activity: [2 years, 11 months ago](https://wordpress.org/support/topic/pause-button-6/#post-16714128)
 * Status: resolved