If you added a Slideshows element in your page with the Autoplay option enabled you might want to add a Play/Pause functionality to it in order for your users to be able to focus on a certain item for as long as they want.

 


Prerequisites

  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() {
    $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);  
});


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.


Result:


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


Related articles: