LayerSlider Custom Next/Prev Buttons

[Georgich]

Hi there! I want to create custom buttons for my LayerSlider.

According to LayerSlider API documentation, there is a method to change slides using jquery:

$('#slider').layerSlider('next');
$('#slider').layerSlider('prev');

Please, help me with this. I want to make a button in cornerstone, then apply class or id to it, to switch slides.

[jade]

Hey Philipp,

Yes, please follow these steps:

#1. Add the button elements in Cornerstone then assign a unique ID to the previous and next button:

#2. Add this code in the X > Theme Options > Global JS:

(function($){

    $( "#prev, #next" ).on( "click", function() {
      var action = $(this).attr('id');
      
      $('#layerslider_1' ).layerSlider( action );
    });

})(jQuery);

To explain the code above, it assumes that the ID you have added to the previous button is prev and next to the next button where you call the respective layer slider function depending on which button is clicked.

Also, you must double check the slider ID and replace #layerslider_1 with the correct slider ID. Layersliders has a default ID and what only changes is the number of the slider. For example, if you have the slider shortcode [layerslider id="5"] then the slider ID should be #layerslider_5.

Another way to determine the slider ID is to use the Google Chrome dev tools where you will have to right click on the slider and it will open the code inspector panel where you can see the page code structure:

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.

[Georgich]

Dat did the trick! Thank you very much! Love ya

[jade]

You’re most welcome, Philipp.