elementor4fun-logo
Last update: May 29, 2024

How to pause Slides autoplay when you hover over?

The basic Slider element in Oxygen has no option to stop the automatic playback of slides when you hover over the mouse. But sometimes this option is necessary, mainly when each slide contains text, and each user needs a different time to study the information.

I did some tests and found a very simple solution. Add the following code to the Advanced > JavaScript section of the slider settings and your slider will stop playback when you hover over it:

jQuery(document).ready(function($) {

	if($('html').attr('ng-app') == 'CTFrontendBuilder') return;
  
	var data = $('.oxygen-unslider-container').data('unslider');
  
	$('.oxygen-unslider-container').hover(
		function() {
			data.stop();
		},
		function() {
			data.start();
		}
	);

});

Example of inserting code for the Slider:

Demo

Hover over the slider and autoplay will stop:
closealign-justifychevron-downcaret-up