Soliloquy Documentation
Documentation, Reference Materials, and Tutorials for Soliloquy
Documentation, Reference Materials, and Tutorials for Soliloquy
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.
Important: This tutorial assumes you’re comfortable creating and/or editing PHP files in your WordPress installation and is intended for advanced users.
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:
soliloquy-navigate-to-slide.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 – Navigate to Slide plugin.
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.