Control the slider (jQuery)

Crelly Slider features 7 functions that can be called to control a specific slider. The functions are the following:

  • $(‘.crellyslider-slider-your_slider_alias‘).data(‘crellySlider’).pause();
  • $(‘.crellyslider-slider-your_slider_alias‘).data(‘crellySlider’).resume();
  • $(‘.crellyslider-slider-your_slider_alias‘).data(‘crellySlider’).nextSlide();
  • $(‘.crellyslider-slider-your_slider_alias‘).data(‘crellySlider’).previousSlide();
  • $(‘.crellyslider-slider-your_slider_alias‘).data(‘crellySlider’).changeSlide(new_slide_index);
  • var current_slide = $(‘.crellyslider-slider-your_slider_alias‘).data(‘crellySlider’).getCurrentSlide();
  • var total_slides = $(‘.crellyslider-slider-your_slider_alias‘).data(‘crellySlider’).getTotalSlides();

Example:

<button id="pause-resume">Pause / Resume</button>

<script type="text/javascript">
	var playing = true;	
	(function($) {
	$(document).ready(function() {
		$('#pause-resume').click(function() {
			if(playing) {
				$('.crellyslider-slider-test').data('crellySlider').pause();
				playing = false;
			}
			else {
				$('.crellyslider-slider-test').data('crellySlider').resume();
				playing = true;
			}
		});
	});
	})(jQuery);
</script>

 

Import a slider from a .zip file

This is a function that requires a lot of feedback from developers, I would really appreciate your feedback. If you’re creating a 1-click installer for your theme, and you want to automatically import a demo slider, this is the function you need.

crellyslider_importSlider(get_template_directory() . '/demoslider.zip');

Crelly Slider must be installed and activated to use this feature.

 

Filter TinyMCE options

It is possible to customise the TinyMCE editor that is displayed when the user edits a text element.

function my_crellyslider_editor($editor_options) {
    $editor_options['toolbar1'] = 'bold,italic,strikethrough,alignleft,aligncenter,alignright,link,unlink,underline,forecolor,backcolor';
    $editor_options['toolbar2'] = 'fontselect,fontsizeselect';
	
    return $editor_options;
}
add_filter('crellyslider_tiny_mce_before_init', 'my_crellyslider_editor');

The list of all the default options used in Crelly Slider can be found in admin.php. Look for the function tinyMCEDefaultOptions().

 

Customize the loading animation of the slider

The default loading animation is a white circle with 3 animated blue stripes. This section will show you how to replace the stripes with a custom background image.
First, you need to upload an image to the WordPress media library. Then, add the following CSS:

/* Hide the blue stripes */
.crellyslider > .cs-preloader > .cs-loader > .cs-spinner {
    display: none;
}

/* Add a background image to the circle */
.crellyslider > .cs-preloader > .cs-loader {
    background-image: url("https://my-website.com/wp-content/uploads/2020/05/my-background.jpg");
    background-size: cover;
}

/* Optional: transform the circle into a square */
.crellyslider > .cs-preloader > .cs-loader {
    border-radius: 0;
}