Reputation: 75
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