Slick Slider - API для загрузки изображений в слайды
Я создаю api изображений, которые выглядят следующим образом:
{
"images": [
{ "src": "http://placehold.it/100x100" },
{ "src": "http://placehold.it/100x100" },
{ "src": "http://placehold.it/100x100" }
]
}
Я интегрировал гладкий слайдер (http://kenwheeler.github.io/slick/) и следующий код для добавления изображений в слайдер.
const jsonUrl = "./images.json";
$.getJSON(jsonUrl, function (json) {
var imgList = "";
$.each(json.images, function () {
imgList += '<div class = "slide"><img src= "' + this.src + '"></div>';
});
$('.videos-slides .slide').append(imgList);
});
Разметка HTML выглядит следующим образом:
<div class = "videos-slider">
<div class = "videos-slides"></div>
</div>
Я понимаю логику того, как это работает, но мне нужен толчок в правильном направлении, чтобы добиться этого. Проблема, которую я получаю, заключается в том, что изображения загружаются друг под другом. Отчасти потому, что, когда я добавляю изображения в .video-slides .slide, он не добавляет дополнительные классы, которые добавляются гладким слайдером, когда вы добавляете в сам html.
Я инициализировал гладкий слайдер перед всем кодом выше FYI.
@CBroe Спасибо, мне удалось решить проблему.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вам нужно будет обновить свой слайдер после добавления HTML.
когда ты делаешь
$('.videos-slides .slide').append(imgList);
сделай это тоже
$('.mySlider')[0].slick.refresh(); //replace .mySlider with actual DOM element
см. демонстрацию - https://jsfiddle.net/5ox31m2a/2993/
С помощью специального метода slickAdd проблема была решена.
const jsonUrl = "./images.json";
$.getJSON(jsonUrl, function (json) {
var imgList = "";
$.each(json.images, function () {
imgList += '<div><img src= "' + this.src + '"></div>';
});
$('.sy-videos-slides').slick('slickAdd', imgList);
});
Для этой цели у него есть специальный метод
slickAdd, и в документации есть пример его использования.