Navigate to Slide with HTML

Would you like to have your text navigate to a specific slide on your page? You can use custom HTML to load a specific slide in a Soliloquy slider following this guide.

1. Creating the Plugin
2. Activating the Plugin
3. Place Custom HTML on post or page

Creating the Plugin

To use this functionality on your site. Just add the following code to a new file at wp-content/plugins/soliloquy-navigate-to-slide.php.

<?php
/**
* Plugin Name: Soliloquy - Navigate to Slide
* Plugin URI: https://soliloquywp.com
* Version: 1.0
* Author: Soliloquy Team
* Author URI: https://soliloquywp.com/
* 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' );

Not sure how to do that? Just follow these steps:

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 above into the file and save the file as soliloquy-navigate-to-slide.php.
3. Once you have 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.

Activating 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 – Navigate to Slide plugin.

Place Custom HTML on post or page

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>

It’s important to note that you must change the data-soliloquy-id="4" to the slider ID that you have on the page. If your slider shortcode looks like this:

[soliloquy id="1161"]

Then your html should look like this:

<!--
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="1161" data-soliloquy-index="0">Load Slide 1</a>

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

Would you like to do some more fun things with Soliloquy? Have a look at this tutorial to find out how to Display the Slide Title Before Caption.