Jssor Slider-文本超链接到特定幻灯片？

Question

I am using Jssor Slider to display multiple images.

I have a separate thumbnail section which when clicked, should show the larger image in the slider.

Jssor Slider has an API to do this:

jssor_slider1.$GoTo(2);

How ever, I don't understand how to run this from a hyperlink.

I have tried doing onClick="jssor_slider1.$GoTo(2);" but this shows up an error in the console that "jssor_slider1" is undefined.

<script src="js/slider-master/js/jquery-1.9.1.min.js"></script>
<script src="js/slider-master/js/jssor.slider.mini.js"></script>
<script>
    jQuery(document).ready(function($) {

        var options = {
            $ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$,
                $ChanceToShow: 2
            }
        };

        var jssor_slider1 = new $JssorSlider$('slider1_container', options);

    });

</script>

How would be correct way of doing this be? Thank you.

Answer 1

Make the jssor_slider1 variable global, you can access the instance anywhere.

Also, jssor_slider1.$PlayTo(2); is resonable as well.

<script src="js/slider-master/js/jquery-1.9.1.min.js"></script>
<script src="js/slider-master/js/jssor.slider.mini.js"></script>
<script>
    var jssor_slider1;
    jQuery(document).ready(function($) {

        var options = {
            $ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$,
                $ChanceToShow: 2
            }
        };

        jssor_slider1 = new $JssorSlider$('slider1_container', options);

    });

</script>