Soliloquy Documentation

Documentation, Reference Materials, and Tutorials for Soliloquy

Add Slide Count to a Slider

Would you like to add a slide count to your Soliloquy slider? We can definitely help you with that! We’ll walk you through the steps on how to add a slide counter to your sliders.

Note: This tutorial is a bit more technical than our other docs, but we’ll walk you through the process step by step. In order to have a slide counter on your sliders, we’ll need to create and upload a basic WordPress plugin.


Creating the Plugin

To add a slide counter to your Soliloquy slides, just add the following code to a new file at wp-content/plugins/soliloquy-slide-count.php.

<?php
/**
* Plugin Name: Soliloquy - Slide Count
* Plugin URI: http://soliloquywp.com
* Version: 1.0
* Author: Soliloquy Team
* Author URI: http://soliloquywp.com
* Description: Displays "X of Y" on Soliloquy Slideshows
*/

function sol_soliloquy_slide_count( $html, $data ) {

	$html .= '<div class="soliloquy-slide-count" style="margin: 5px 0;text-align:center;">
		<span class="current">1</span>
		' . __( 'of', 'soliloquy' ) . '
		<span class="total">' . count( $data['slider'] ) . '</span>
		' . __( 'slides', 'soliloquy' ) . '
	</div>';

	return $html;
	
}
add_filter( 'soliloquy_output_end', 'sol_soliloquy_slide_count', 10, 2 );

/**
* Update the slide count once transitioned
*/
function sol_soliloquy_slide_count_update( ) {

	?>
	$('span.current', $(element).closest('.soliloquy-container')).text((newIndex + 1));
	<?php
	
}
add_filter( 'soliloquy_api_after_transition', 'sol_soliloquy_slide_count_update' );

If you’re unsure how to create a plugin file, follow these steps below:

  1. Open a text file and make sure that it is a plain text document. You can use a plain text editor like Notepad or a code editor of your choice.
  2. Next, copy and paste the code shown above into the file and save the file as soliloquy-slide-count.php
  3. Once you’ve saved the file you can easily upload this directly to your /plugins directory on your server using FTP or you can right-click on the text document and zip (or compress).
  4. Finally, log in to your WordPress dashboard and go to Plugins » Add New » Upload Plugin and upload the .zip file you just created in the previous step.

Activate the Plugin

Your next step is to activate the plugin you just uploaded. Simply navigate to the Plugins from within your WordPress dashboard and activate the Soliloquy – Slide Count plugin.

Activate the custom plugin to add a slide count to your Soliloquy sliders

The CSS (optional)

Finally, if you’d like to style your new slide counter, we’ll give you some CSS to get started.

.soliloquy-slide-count {
    display: block;
    float: right;
    padding: 10px;
    background-color: #f6f6f6;
    font-size: 12px;
}
.soliloquy-slide-count span.current {
    font-size: 14px;
    padding: 5px;
    color: #ff3700;
}
.soliloquy-slide-count span.total {
    font-size: 18px;
}

And that’s all you need! Would you like to add a default caption to your slides? Have a look at our tutorial on How to Set a Default Caption.

[i]
[i]