Jssor slidet ajax only displays first slider

21 Views Asked by At

I'm trying to create dynamic slider with ajax, but only first slider can slide photo, the others keep their first image. It's like, slider is blocked in fisrt call function. I tried to destroy with $Destroy() in many places or but not working

My fucntion onclick:

        function popup_leasing_data(id){

            $.ajax({
                url: '{{ path('leasing_detail') }}',
                data: {id:id},
                success: function(data) {

                    var slides = '<div><img data-u=\"image\" src=\"/leasing/' + data.imageSlide1 + '\"  class=\"img-fluid\"/></div>';
                    if(data.imageSlide2 !=null){
                        slides += '<div><img data-u=\"image\" src=\"/leasing/' + data.imageSlide2 + '\"  class=\"img-fluid\"/></div>';
                    }
                    if(data.imageSlide3 !=null){
                        slides += '<div><img data-u=\"image\" src=\"/leasing/' + data.imageSlide3 + '\"  class=\"img-fluid\"/></div>';
                    }
                    if(data.imageSlide4 !=null){
                        slides += '<div><img data-u=\"image\" src=\"/leasing/' + data.imageSlide4 + '\"  class=\"img-fluid\"/></div>';
                    }
                    $('#offer_slides').html(slides);               
                    $('#offer_name').html('<strong>' +  data.carName + ' </strong>');
                    $('#offer_name_subtile').html(data.rentAndKm + ' :');
                    $('#offer_price').html('<strong>' +  data.price + '</strong>');
                    $('#offer_car_model').html('<strong>' +  data.carModel + ' </strong>');
                    $('#offer_standard_equipment').html('<strong>Equipements de série :</strong><br>' +  data.standardEquipment);     
                    $('#offer_services_included').html('<strong>Prestations incluses :</strong><br>' +  data.servicesIncluded);     
                    $('#offer_technical_informations').html('<strong>Informations techniques :</strong><br>' +  data.technicalInformations);     
                    $('#offer_legal_notice').html('* ' +  data.legalNotice);

                    jssor_2_slider_init();
                }
            });
        }

My slider function:

window.jssor_2_slider_init = function() {
    console.log('coucou');
    var jssor_2_options = {
        $AutoPlay: 1,
        $ArrowNavigatorOptions: {
            $Class: $JssorArrowNavigator$
        },
        $BulletNavigatorOptions: {
            $Class: $JssorBulletNavigator$,
            $SpacingX: 20,
            $SpacingY: 20
        }
    };
    
    var jssor_2_slider = new $JssorSlider$("jssor_2", jssor_2_options);

    /*#region responsive code begin*/
    var MAX_WIDTH = 3000;
    function ScaleSlider() {
        var containerElement = jssor_2_slider.$Elmt.parentNode;
        var containerWidth = containerElement.clientWidth;
        if (containerWidth) {
            var expectedWidth = Math.min(MAX_WIDTH || containerWidth, containerWidth);

            jssor_2_slider.$ScaleWidth(expectedWidth);
        }
        else {
            window.setTimeout(ScaleSlider, 30);
        }
    }
    ScaleSlider();
    $Jssor$.$AddEvent(window, "load", ScaleSlider);
    $Jssor$.$AddEvent(window, "resize", ScaleSlider);
    $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
    /*#endregion responsive code end*/
};

0

There are 0 best solutions below