Product:
Tutorial:
You can use the Wonder Carousel plugin to easily create image or video carousels for your WordPress website. This tutorial will guide you on how to add buttons to the carousel that will jump to other slides when clicked.
An online demo is as follows:
To begin, open the Wonder Carousel plugin and either edit an existing carousel or create a new one. In Step 1, you can add an image or video. Then, add the button HTML code to the Title or Description input box, or use the "Add HTML Code / Shortcode / Soundcloud" button to include the button HTML code.
You can also add the buttons anywhere on the same webpage as the carousel, for example, clicking the following buttons will also switch the above carousel:
When adding the buttons, ensure that each button linking to a specific slide has a unique class name. For example:
<button class="goto-slide-1">Goto Slide 1</button> <button class="goto-slide-2">Goto Slide 2</button> <button class="goto-slide-3">Goto Slide 3</button>
To enable jumping to a slide upon clicking the buttons, proceed to Step 3, Options tab, and navigate to Advanced Options. Add the following code to the Custom JavaScript input box:
(function($){
$(document).ready(function() {
$(".goto-slide-1").click(function() {
$("#wonderplugincarousel-CAROUSELID").data("object").slideRun(0, true);
});
$(".goto-slide-2").click(function() {
$("#wonderplugincarousel-CAROUSELID").data("object").slideRun(1, true);
});
$(".goto-slide-3").click(function() {
$("#wonderplugincarousel-CAROUSELID").data("object").slideRun(2, true);
});
});
})(jQuery);
The plugin will automatically substitute the macro variable CAROUSELID in the code with the current carousel ID, eliminating the need for manual changes.
$(".goto-slide-2").click(function() {
$("#wonderplugincarousel-CAROUSELID").data("object").slideRun(1, true);
});
The code snippet above indicates that upon clicking the button with the class name "goto-slide-2," it will navigate to Slide 2. Remember that slide order starts from 0, so to jump to the second slide, the first parameter in the function call slideRun should be 1.
