Slider Main Page

This is the page that comes when you click on “Crelly Slider” from the left WordPress admin¬†panel. Here you can view, modify or delte the sliders that you have created. If you want to add a new slider, just click on the blue button at the bottom of the page.

 

Add or Edit a Slider

When you create or edit a slider, you will be redirected to a new page. First of all, write a name for the slider (e.g. Home Slider). Automatically an alias and a shortcode will be generated. You will need the shortcode to insert a slider into a page or a post.

Remember that when you finish to add / edit a slider, you have to click “Save changes”!

 

Edit Slides

To add, edit or remove the slides of the slider, click on “Edit Slides” at the top of the page.

main-tabs

A table like this will be shown:

 

From this table you can change the slide general settings. Over the table there are some tabs. Clicking on them you can select every slider slide. To delete a slide, just click on the red X.
If you want to re-order the slides, just drag the slide tab to the left or right, before or after another slide tab.

Slide Preview Area and Elements (text and images)

In the preview area you can add and position the elements. To add an element, click on the yellow button under the preview area. You have to position the element to it’s final position (the position that will take after the IN ANIMATION) just by dragging it around. If you click on an element, it will be selected (a black border will appear) and it’s settings will be displayed under the preview area.

 

Insert a Slider into a Page or a Post

There are 2 ways to insert Crelly Slider into a page / post.

  • The first (and the easiest) is to use a shortcode. The plugin will automatically generate a shortcode that you can find in the the slider settings tab. Just copy and paste it into a post or a page, like this:
    shortcode
  • The second method is using a php function.¬†Write <?php if(function_exists(‘crellySlider’)) crellySlider(‘your_slider_alias’); ?>. Put the function wherever you want in a theme php file (e.g. index.php).

 

Plugin APIs

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

  • jQuery(‘.crellyslider-slider-your_slider_alias‘).data(‘crellySlider’).pause();
  • jQuery(‘.crellyslider-slider-your_slider_alias‘).data(‘crellySlider’).resume();
  • jQuery(‘.crellyslider-slider-your_slider_alias‘).data(‘crellySlider’).nextSlide();
  • jQuery(‘.crellyslider-slider-your_slider_alias‘).data(‘crellySlider’).previousSlide();
  • jQuery(‘.crellyslider-slider-your_slider_alias‘).data(‘crellySlider’).changeSlide(new_slide_index);
  • var current_slide = jQuery(‘.crellyslider-slider-your_slider_alias‘).data(‘crellySlider’).getCurrentSlide();
  • var total_slides = jQuery(‘.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>