Search code examples
javascriptjqueryjssor

JSSOR Slider is not working with dynamic data

I have quite simple HTM page where i want yo use JSSOR Slider, but it is simply dos't work, I don't see any errors in console, when I clink to Arrow bottons I images also not changed. Why ?

Head

 <script type="text/javascript" src="/Scripts/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="/Scripts/slider/js/jssor.slider.mini.js"></script>

Code:

<body style="margin: 0px; overflow: hidden; text-decoration: none; border: 0px;">

    <div id="slider1_container" name="slider1_container" style="position: relative; top: 0px; left: 0px; width: 676px; height: 375px;">
        <!-- Loading Screen -->
        <div u="loading" style="position: absolute; top: 0px; left: 0px;">
            Loading ...
        </div>

        <!-- Slides Container -->
        <div u="slides"  style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 676px; height: 375px;">
            <div id="HomeImgSliders"></div>
        </div>
        <!-- Bullet Navigator Skin Begin -->
        <style>
            /* jssor slider bullet navigator skin 10 css */
            /*
            .jssorb10 div           (normal)
            .jssorb10 div:hover     (normal mouseover)
            .jssorb10 .av           (active)
            .jssorb10 .av:hover     (active mouseover)
            .jssorb10 .dn           (mousedown)
            */
            .jssorb10 div, .jssorb10 div:hover, .jssorb10 .av
            {
                background: url(/Scripts/slider/img/b10.png) no-repeat;
                overflow: hidden;
                cursor: pointer;
            }

            .jssorb10 div
            {
                background-position: -10px -10px;
            }

                .jssorb10 div:hover, .jssorb10 .av:hover
                {
                    background-position: -40px -10px;
                }

            .jssorb10 .av
            {
                background-position: -70px -10px;
            }

            .jssorb10 .dn, .jssorb10 .dn:hover
            {
                background-position: -100px -10px;
            }
        </style>
        <!-- bullet navigator container -->
        <div u="navigator" class="jssorb10" style="position: absolute; bottom: 16px; right: 6px;">
            <!-- bullet navigator item prototype -->
            <div u="prototype" style="POSITION: absolute; WIDTH: 11px; HEIGHT: 11px;"></div>
        </div>
        <!-- Bullet Navigator Skin End -->


        <!-- Arrow Navigator Skin Begin -->
        <style>
            /* jssor slider arrow navigator skin 14 css */
            /*
            .jssora14l              (normal)
            .jssora14r              (normal)
            .jssora14l:hover        (normal mouseover)
            .jssora14r:hover        (normal mouseover)
            .jssora14ldn            (mousedown)
            .jssora14rdn            (mousedown)
            */
            .jssora14l, .jssora14r, .jssora14ldn, .jssora14rdn
            {
                position: absolute;
                cursor: pointer;
                display: block;
                background: url(/Scripts/slider/img/a14.png) no-repeat;
                overflow: hidden;
            }

            .jssora14l
            {
                background-position: -15px -35px;
            }

            .jssora14r
            {
                background-position: -75px -35px;
            }

            .jssora14l:hover
            {
                background-position: -135px -35px;
            }

            .jssora14r:hover
            {
                background-position: -195px -35px;
            }

            .jssora14ldn
            {
                background-position: -255px -35px;
            }

            .jssora14rdn
            {
                background-position: -315px -35px;
            }
        </style>
        <!-- Arrow Left -->
        <span u="arrowleft" class="jssora14l" style="width: 30px; height: 50px; top: 123px; left: 0px;"></span>
        <!-- Arrow Right -->
        <span u="arrowright" class="jssora14r" style="width: 30px; height: 50px; top: 123px; right: 0px"></span>
    </div>

</body>

<script type="text/javascript">

    $().ready(function () {
        $.get("/api/MyService?lng=en", function (data) {
            $.each(data, function (key, value) {
                var html = "<div><a href='" + value.Href + "' target='_blank'><img u=image src=" + value.Url + " /></a></div>";
                $("#HomeImgSliders").append(html);
            });

            var imagesLng = data.length;

            var options = {
                $DragOrientation: 3,                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
                $AutoPlay: true,
                $ArrowNavigatorOptions: {                       //[Optional] Options to specify and enable arrow navigator or not
                    $Class: $JssorArrowNavigator$,              //[Requried] Class to create arrow navigator instance
                    $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                    $AutoCenter: 0,                                 //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
                    $Steps: 1,                                    //[Optional] Steps to go for each navigation request, default value is 1
                    $AutoPlay: true,
                    $DisplayPieces: imagesLng
                }


            };

            var jssor_slider1 = new $JssorSlider$("slider1_container", options);
        });
    });
</script>
Solution

  • Please replace

    <!-- Slides Container -->
<div u="slides"  style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 676px; height: 375px;">
    <div id="HomeImgSliders"></div>
</div>

    with

    <!-- Slides Container -->
<div id="HomeImgSliders" u="slides"  style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 676px; height: 375px;">
</div>

    and replace

    $.each(data, function (key, value) {
    var html = "<div><a href='" + value.Href + "' target='_blank'><img u=image src=" + value.Url + " /></a></div>";
    $("#HomeImgSliders").append(html);
});

    with

    $.each(data, function (key, value) {
    var html = "<div><a u=image href='" + value.Href + "' target='_blank'><img src=" + value.Url + " /></a></div>";
    $("#HomeImgSliders").append(html);
});