Soliloquy Documentation

Documentation, Reference Materials, and Tutorials for Soliloquy

Navigate to Slide with HTML

Important: This doc assumes you’re comfortable creating and/or editing PHP files in your WordPress installation and is intended for advanced users.

You can use custom HTML to load a specific slide in a Soliloquy slider following this guide.

Step 1 – Create Plugin File

The first step is to create a new php file in the wp-content/plugins/ directory of your WordPress installation. The easiest way to do this is using your favorite FTP program or through your web hosting account’s file editor (if they provide one).

Once you’ve navigated to the wp-content/plugins/ directory, create a new file with the name soliloquy-navigate-to-slide.php

Step 2 – Edit the New Plugin File

Next, you’ll want to copy and paste the following code into the soliloquy-navigate-to-slide.php plugin file you’ve created:

<?php
/**
* Plugin Name: Soliloquy - Navigate to Slide
* Plugin URI: https://soliloquywp.com
* Version: 1.0
* Author: Tim Carr
* Author URI: http://www.n7studios.co.uk
* Description: Use any HTML element to navigate to a Soliloquy slider's specific slide index
*/

/**
* Adds JS to load a slide when an HTML element is clicked
*
* Requires the following HTML markup to trigger:
* <a href="#" data-soliloquy-id="4" data-soliloquy-index="0">Load Slide 1</a>
*
* @param array $data Slider Data
*/
function sol_soliloquy_navigate_to_slide() {

	?>
	$(document).on( 'click', 'a', function(e) {
		if ($(this).data('soliloquy-id') !== undefined && $(this).data('soliloquy-index') !== undefined) {
			e.preventDefault();
			soliloquy_slider[ $(this).data('soliloquy-id') ].goToSlide( $(this).data('soliloquy-index') );
		} 
	});
	<?php

}
add_action( 'soliloquy_api_slider', 'sol_soliloquy_navigate_to_slide' );

Step 3 – Activate the New Plugin

The next step is to navigate to the WordPress Admin > Plugins screen, locate the plugin named Soliloquy – Navigate to Slide and activate the plugin.

Step 4 – Place Custom HTML

The last step is to place the custom HTML you want to use to navigate the slider. Your HTML should follow this format:

<!--
Use the below markup to trigger loading a specific slide index for a specific slider
data-soliloquy-id = Soliloquy ID
data-soliloquy-index = Zero based index of the slide you want to display. 0 = first slide, 1 = second slide etc
-->
<a href="#" data-soliloquy-id="4" data-soliloquy-index="0">Load Slide 1</a>

That’s it! You’ve successfully configured custom slide navigation with HTML!

[i]
[i]