Laurie97275
Laurie97275

Reputation: 75

Jssor slidet ajax only displays first slider

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*/
};

Upvotes: 1

Views: 21

Answers (0)

Related Questions