Slider Revolution WP
09.27.2016
Change slides from external hyperlinks
Using the slider’s API, you can change to a specific slide by clicking a hyperlink outside the slider.
To get started, first identify your slider’s API identifier. This can be found in the slider’s main settings page.
In the following screenshot, “revapi1” is the slider’s API identifier.
To setup a traditional hyperlink from the page/post’s content to load a specific slide in the slider, you can use the following hyperlink example format:
|
1 2 3 |
<a href="#">Show Slide Number Two</a> |
If you want to load a specific slide from one of your theme’s main menu items, from “WP Main Menu -> Appearance -> Menus”, and then from “Screen Options”:
Click the “Enable Classes” option, and then save:
And then add a new menu item, using the “#” character as the url:
Then enter a custom class name for the new menu item. Whatever entered here will then get referenced in the JavaScript we’ll use to connect the main menu item to the slider’s API. For this example, we’ll use “slider-link” as the menu item’s class name.
Next, let’s make the new menu item change the page’s main slider to slide #2. To do that, enter the following custom JavaScript to the slider’s Custom JavaScript section:
|
1 2 3 4 5 6 7 8 9 10 11 |
// ".slider-link" is the class name we assigned to the main menu item jQuery('body').on('click', '.slider-link', function() { // revapi5 equals the API identified for the slider // revshowslide(2) will load the second slide revapi5.revshowslide(2); return false; }); |
