Jssor slidet ajax 只显示第一个滑块

时间:2021-04-02 09:52:35

标签: jquery ajax jssor

我正在尝试使用 ajax 创建动态滑块,但只有第一个滑块可以滑动照片,其他滑块保留他们的第一个图像。 就像,滑块在第一个调用函数中被阻止。 我试图在很多地方用 $Destroy() 销毁或但不工作

我的点击功能:

        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();
                }
            });
        }

我的滑块功能:

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 个答案:

没有答案