Search code examples
razornavigationsliderjssor

JSSOR Navigation Arrows Not Working


My slider is not working for some reason, and I cannot figure it out. Here's the code:

<div id="slider1_container">
    <!-- Slides Container -->
    <div u="slides" style="cursor: move; position: relative; overflow: hidden; left: 0px; top: 0px; width: 700px; height: 400px;">
        <div><img u="image" src="@appRoot/images/Slider/camp1.jpg" /></div>
        <div><img u="image" src="@appRoot/images/Slider/camp2.jpg" /></div>
        <div><img u="image" src="@appRoot/images/Slider/camp3.jpg" /></div>
    </div>
    <!-- Arrow Navigator Skin Begin -->

    <!-- Arrow Navigator Skin End -->
</div>

<!-- Arrow Left -->
        <span u="arrowleft" class="jssora03l" style="width: 55px; height: 55px; top: 500px; float:left; margin-left: 135px;">
        </span>
<!-- Arrow Right -->
        <span u="arrowright" class="jssora03r" style="width: 55px; height: 55px; top: 500px; float:left; margin-left: 910px;">
        </span>
<!-- Arrow Navigator Skin End -->

Solution

  • Please place the 2 arrows inside 'slider1_container'.

    <div id="slider1_container">
        <!-- Slides Container -->
        <div u="slides" style="cursor: move; position: relative; overflow: hidden; left: 0px; top: 0px; width: 700px; height: 400px;">
            <div><img u="image" src="@appRoot/images/Slider/camp1.jpg" /></div>
            <div><img u="image" src="@appRoot/images/Slider/camp2.jpg" /></div>
            <div><img u="image" src="@appRoot/images/Slider/camp3.jpg" /></div>
        </div>
    
        <!-- Arrow Navigator Skin Begin -->
        <!-- Arrow Left -->
        <span u="arrowleft" class="jssora03l" style="width: 55px; height: 55px; top: 500px; float:left; margin-left: 135px;"></span>
        <!-- Arrow Right -->
        <span u="arrowright" class="jssora03r" style="width: 55px; height: 55px; top: 500px; float:left; margin-left: 910px;"></span>
        <!-- Arrow Navigator Skin End -->
    
    </div>
    
    <script>
        jQuery(document).ready(function ($) {
            var options = {
                $ArrowNavigatorOptions: {
                    $Class: $JssorArrowNavigator$,
                    $ChanceToShow: 2
                }
            };
            var jssor_slider1 = new $JssorSlider$('slider1_container', options);
        });
    </script>