Pause button

Hello,

I’m sorry for the inconvenience, it’s not possible to add a pause button.

Thanks,

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.

<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-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-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. Hope it helps everyone and feel free to ask me anything related.

Here’s a screenshot of how it looks:

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.

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) 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 1 year, 6 months ago by prccp.