带有生成内容的Jssor幻灯片 [英] Jssor slides with generated content

问题描述

我正在尝试将来自Instagram的实时提要与Jssor幻灯片放在一起，但遇到了问题。 我在这里有这段代码，使用特殊的散列标签从Instagram中提取图片，并将它们放入带有u="image"属性和src url的id"lides"的div中。

function createPhotoElement(photo) {
    if((photo.caption) !== null){var photo_content = photo.caption.text + "  -  ";}      
    else { var photo_content = " "}
    return $('<div>')
   .append(
    $('<img>')
    .attr('u', 'image')
    .attr('src', photo.images.standard_resolution.url)
    )
}

所以在页面上生成后的结果如下：

 <div id="slides" u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 960px; height: 380px;overflow: hidden;">        
    <div><img u="image" src="imgURL"></div>
    <div><img u="image" src="imgURL"></div>
    <div><img u="image" src="imgURL"></div>
    <div><img u="image" src="imgURL"></div>
    <div><img u="image" src="imgURL"></div>
</div>

但问题是jssor幻灯片看不到页面上生成的那些图像。我尝试使用window.addEventListener()和$(document).ready()函数和/或将脚本放在结束正文标记的上方来延迟滑块代码，但仍然不起作用：(

推荐答案

终于可以通过添加窗口来工作了。加载

    $(window).load(function() {
    jssor_slider1_starter('slider1_container');
    });

这篇关于带有生成内容的Jssor幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！