Я должен загрузить изображение на стороне клиента, что в основном происходит сразу после того, как браузер заканчивает запрашивать страницу, запускается вызов ajax для загрузки списка изображений, затем слайды добавляются в контейнер sider. Количество фотографий после этого ajax-вызова неизвестно.
Я попытался создать html-текст слайдов и назначить его контейнеру слайдера, а затем запустить слайдер-стартер. Но слайдер не отображается должным образом.
Большое спасибо за любое предложение
Вы поступаете правильно. Все, что вам нужно, это проверить правильность слайдов (добавленных вами динамически).
Чтобы проверить динамически созданный html, вы можете скопировать его и протестировать в отдельном html-файле, чтобы увидеть, работает ли слайдер.
Я публикую то, что я сделал здесь, если это полезно для кого-то:
//function to start the slider
jssor_slider1_starter = function (containerId) {
var options = {
$AutoPlay: false,
$SlideDuration: 800,
$FillMode: 2,
$ThumbnailNavigatorOptions: {
$Class: $JssorThumbnailNavigator$,
$ChanceToShow: 2,
$Lanes: 1,
$SpacingX: 14,
$SpacingY: 12,
$Cols: 6,
$Align: 156,
$Orientation: 2
}
};
var jssor_slider1 = new $JssorSlider$(containerId, options);
};
//Ajax function to start the slider after loading the 'content' of slider
//getImgUrl is the url of page returning urls of images contained in slider. Format of response can be whatever as long as you can parse it, my sample is [[[url1,url2..]]]
$.ajax({
url:getImgUrl,
success:function(data){
var imgurls_str=data.substring(data.indexOf('[[[')+3,data.indexOf(']]]'));
var imgurls=imgurls_str.split(',');
var imgHtmls='';
for(var i=0;i<imgurls.length;++i){
imgHtmls+='<div><img u="image" src="'+imgurls[i]+'" /><img u="thumb" src="'+imgurls[i]+'" /></div>';
}
$("#slides").html(imgHtmls);
jssor_slider1_starter('slider1_container');
}
});
