Soliloquy Documentation
Documentation, Reference Materials, and Tutorials for Soliloquy
Documentation, Reference Materials, and Tutorials for Soliloquy
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.
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: https://soliloquywp.com * Version: 1.0 * Author: Soliloquy Team * Author URI: https://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:
soliloquy-slide-count.php
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.
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.