How can we help you today?

How to Add Play/Pause Functionality to the Slideshows Design Element

If you added a Slideshows Design Element to your page with the Autoplay option enabled you might want to add a Play/Pause functionality to it in order for users to be able to focus on a certain item for as long as they want. This article will explain how to achieve this.



  1. Being able to edit/customize ShortPoint design elements on a page.
  2. Being able to use the Theme Builder to apply Custom JavaScript.

Step 1: Insert Slideshows

Insert a Slideshows element into the page and enable the Autoplay option:

Step 2: Add Custom CSS class

Navigate to the Custom CSS tab and add "pausableSlider" in the Class field:

Step 3: Add some items in the slider

Step 4: Add Button

Next up, add a Button element in the page with the title "Pause" and select the Pause icon as well:

Step 5: Add custom CSS Class

Navigate to the Custom CSS tab and add "playPauseBtn" in the Class field:

Step 6: Custom JavaScript

The final step involves adding some Custom JavaScript code, which you can do so by using the ShortPoint Theme Builder. The following guide should be helpful in case you haven't done that before. The code that needs to be added is the following:

shortpoint.$( document ).ready(function() {
  var $button = shortpoint.$('.playPauseBtn');
  var $slider = shortpoint.$('.pausableSlider');
  var $icon = $button.find('i');
  function playSlider() {
    $button.text(' Pause');
    $'click', pauseSlider);
  function pauseSlider() {
    $button.text(' Play');
    $'click', playSlider);
  $'click', pauseSlider);  

A few explanations for what this code achieves:

  1. Wait for all page elements to be rendered.
  2. Identify the desired elements: Slideshow, Button and the Icon inside the button.
  3. Define two functions, one to Play the Slideshow and one to Pause the Slideshow. These functions will also change the Icon and the text of the Button accordingly. If the Slideshow is Paused, the Icon will be the Play icon and the text will say "Play", and vice-versa.
  4. Enable the functionality when the Button is clicked, according to the current status of the Slideshow.

Don't forget to publish the Theme Builder settings so that the code will be applied when the page is loaded next time.


We hope this guide has been helpful and you are now able to achieve the desired effect!

Related articles:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 65 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more