https://www.lighthouseislandresort.com/kiosk-v2/
The images/logos on the first slide when clicked will navigate the user to the slide in question.
It works using this piece of code: `
jQuery(document).ready(function($){
$(window).on("elementor/frontend/init", function () {
elementorFrontend.hooks.addAction(
"frontend/element_ready/premium-carousel-widget.default", PremiumCarouselHandler);
});
var PremiumCarouselHandler = function ($scope, $) {
var $slides = $scope.find(".premium-carousel-template");
if( ! $slides.length )
return;
var $carousel = $scope.find(".premium-carousel-inner");
//Go to Next Slide
$slides.on("click", "#premium-carousel__slide_next", function(){
$carousel.slick('slickNext');
});
//Go to Prev Slide
$slides.on("click", "#premium-carousel__slide_prev", function(){
$carousel.slick('slickPrev');
});
//Go to Other $slides
$slides.on("click", ".premium-carousel__slide_custom", function(){
var slideIndex = $(this).attr("id").replace("premium-carousel__slide_", "");
$carousel.slick( 'slickGoTo', slideIndex - 1 );
});
};
});
`
It functions by assigning:
CSS ID: premium-carouselslide_2 (slide_3, slide_4, slide_5, etc.)
CSS Class: premium-carouselslide_custom
To the individual images and they'll navigate to the slide on click.
However, when I add what I believe to be the correct CSS ID and Class to the Buttonizer buttons, it does not function the same as the images on slide 1.
