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

If you have a Slideshow Design Element on your page with the Autoplay option enabled, you might want to add a Play/Pause functionality so that users can focus on certain items for as long as they want. 

TABLE OF CONTENTS

• Prerequisites
• Step-by-step Tutorial
  • Part 1: Add Class Name to the Slideshow Design Element
    • Step 1: Edit the SharePoint web part
    • Step 2: Edit the Slideshow Design Element
    • Step 3: Add Class Name
  • Part 2: Add Class Name to the Buttom Design Element
    • Step 1: Insert the Button Design Element
    • Step 2: Customize the Button Design Element
    • Step 3: Add Class Name
  • Part 3: Add the Custom Javascript
    • Step 1: Insert the Code Design Element
    • Step 2: Copy the Javascript
    • Step 3: Copy the Javascript
    • Step 4: Insert and Save

Prerequisites

• You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
• You must be a ShortPoint Designer with an active license.
• You must already have the Slideshow Design Element on your page.

Step-by-step Tutorial

The steps have been divided into three parts. Follow all three parts to learn how to add the play/ pause functionality to the Slideshow Design Element.

Part 1: Add Class Name to the Slideshow Design Element

This part of the tutorial will demonstrate how to add a class name to the Slideshow Design Element. Start the interactive tutorial or follow the steps below:

Step 1: Edit the SharePoint web part

• Go to the SharePoint page you want to use and click Edit.

• Click the ShortPoint tag.
• Select the pencil icon.

Step 2: Edit the Slideshow Design Element

NOTEBefore proceeding, make sure you already have the Slideshow Design Element on your page.

• Click the Slideshow tag.
• Select the cogwheel icon.

Step 3: Add Class Name

• Navigate to the Custom CSS tab.
• Add the Class Name you prefer. Make sure to remember this as you will use this in the next parts.
• Click the green checkmark.

Part 2: Add Class Name to the Buttom Design Element

This part will demonstrate how to insert and customize the Button Design Element, as well as, assign a Class Name. Start the interactive tutorial or follow the steps below:

Step 1: Insert the Button Design Element

• Click the pink plus icon.

• Use the search bar to look for the Button Design Element and click it.

Step 2: Customize the Button Design Element

• Modify the button Title. For this guide, we will name the button “Pause”.
• Add a button Icon. For this guide, we will use the pause icon.
• Navigate to the Design tab.
• Modify the look of the button according to your preference.

Step 3: Add Class Name

• Navigate to the Custom CSS tab.
• Add the Class Name you prefer. Make sure that is different from the class name you added for the Slideshow Design Element.
• Click the green checkmark.

Part 3: Add the Custom Javascript

This part will demonstrate how to add the custom Javascript. To get started, click the interactive tutorial or follow the detailed instructions.

Before proceeding with the interactive tutorial below, copy this Javascript:

shortpoint.$( document ).ready(function() {
  var $button = shortpoint.$('.playPauseBtn');
  var $slider = shortpoint.$('.pausableSlider');
  var $icon = $button.find('i');
  
  function playSlider() {
    $slider.slick('play');
    $button.text(' Pause');
    $button.prepend($icon);
    $icon.addClass('shortpoint-icon-fa-pause');
    $icon.removeClass('shortpoint-icon-fa-play');  
    $button.one('click', pauseSlider);
  }
  
  function pauseSlider() {
    $slider.slick('pause');
    $button.text(' Play');
    $button.prepend($icon);
    $icon.removeClass('shortpoint-icon-fa-pause');
    $icon.addClass('shortpoint-icon-fa-play');  
    $button.one('click', playSlider);
  }
  
  $button.one('click', pauseSlider);  
});

Step 1: Insert the Code Design Element

• Click the Switch to Grid Mode icon.

• Select the gray plus icon.

• Use the search bar to look for the Code Design Element and click it.

Step 2: Copy the Javascript

• Copy the Javascript code below:

shortpoint.$( document ).ready(function() {
  var $button = shortpoint.$('.playPauseBtn');
  var $slider = shortpoint.$('.pausableSlider');
  var $icon = $button.find('i');
  
  function playSlider() {
    $slider.slick('play');
    $button.text(' Pause');
    $button.prepend($icon);
    $icon.addClass('shortpoint-icon-fa-pause');
    $icon.removeClass('shortpoint-icon-fa-play');  
    $button.one('click', pauseSlider);
  }
  
  function pauseSlider() {
    $slider.slick('pause');
    $button.text(' Play');
    $button.prepend($icon);
    $icon.removeClass('shortpoint-icon-fa-pause');
    $icon.addClass('shortpoint-icon-fa-play');  
    $button.one('click', playSlider);
  }
  
  $button.one('click', pauseSlider);  
});

• Replace pausableSlider with the Class Name you added for the Slideshow Design Element.

• Scroll down and disable Sandbox mode.

Step 4: Insert and Save

• Click Insert.
• Click the eye icon to see your page in real-time.

• Click Save to apply your changes.

Congratulations! You can now pause/play the Slideshow Design Element.

Related articles:

• How to apply custom JavaScript/CSS on a Modern SharePoint site
• Customize ShortPoint look and feel using the CSS class name and Custom CSS
• How to Resize an Individual Tile