jquery - Jssor slidet ajax 只显示第一个滑块
问题描述
我正在尝试使用 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*/
};
解决方案
推荐阅读
- node.js - Discord.js TypeError:无法读取未定义的属性“客户端”
- java - Java通用通配符构造函数不接受对象?
- c# - 是否可以使用 MethodDecorator.Fody 编织到项目的每个方法中?
- javascript - 如何导入在另一个组件中呈现的组件?
- laravel - Laravel ErrorException 没有这样的文件或目录
- r - 在 R 中,如何删除其值全部为 FALSE 的列?
- laravel - 如何使用数据库中各自的值自动填充 Laravel Nova 操作字段?
- selenium - 有没有办法可以将桌面上的浏览器配置文件用作 Selenium 网络驱动程序?
- rust - 如何在引号内使用迭代器两次!宏?
- android - android studio 没有反映对应用程序的更改