[英]Flexslider doesn't recognise dynamically loaded content?
I am using the SoundCloud API to load artwork into the HTML document as an ul
via Javascript, using instructions I found here , then slide through a carousel of the covers (wrapped in li
tags) using Flexslider . 我正在使用SoundCloud API通过Javascript将
ul
作为图稿通过Java加载到HTML文档中,然后使用我在此处找到的说明 ,然后使用Flexslider滑过封面的轮播(包装在li
标签中)。 This works fine when the the list items are hard-coded into the HTML document, however, when I use the loading script to dynamically retrieve the the artwork as an img
from the API and inject them into the DOM, Flexslider does not register that they are there and add the necessary styling to the li
s, despite the Flexslider script being loaded after the SoundCloud script. 当列表项被硬编码到HTML文档中时,这很好用,但是,当我使用加载脚本从API动态检索图稿作为
img
并将其注入DOM时,Flexslider不会注册它们在那里,添加必要的造型给li
,S尽管Flexslider脚本的SoundCloud脚本之后被加载。 Can anyone show me how to make Flexslider pick up on the dynamic content? 谁能告诉我如何使Flexslider掌握动态内容? Here are my files:
这是我的文件:
<div class="page-container">
<section id="work">
<h3>Work</h3>
<p>Check out my latest mixes below.</p>
<div class="sc-stream">
<ul class="cover-flow clearfix">
<!-- Covers inject here -->
</ul>
</div>
</section>
<hr>
</div><!-- End page-container -->
<!-- Scripts -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/vendor/soundmanager2.js"></script>
<script src="js/sc-custom-player.js"></script>
<script src="js/flexslider.min.js"></script>
<script src="js/main.js"></script>
Same as the file found here 与此处找到的文件相同
$(document).ready(function() {
$('.sc-stream').flexslider({
namespace: "sc-",
animation: "slide",
selector: ".cover-flow > li",
slideshow: false,
controlNav: false,
minItems: 1,
itemWidth: 224,
itemMargin: 8
});
});
Let me know if you need anything else. 需要帮助请叫我。 Thanks in advance.
提前致谢。
It might be that you need a slight delay to allow the data to fully load first? 可能需要稍稍延迟才能首先完全加载数据? Using setTimeout worked on my current project:
使用setTimeout在我当前的项目上工作:
HTML 的HTML
<div class="flexslider">
<ul class="slides"></ul>
</div>
JS JS
$(function () {
function initGame() {
// load xml data file (from same domain)
// iterate xml elements and load <li>s into HTML variable
$(HTML).appendTo('.slides');
setTimeout(function () {
startGame();
}, 500);
}
function startGame() {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
randomize: true,
directionNav: false,
touch: true,
after: function (slider) {
$(".flex-control-nav li").removeClass("active");
$(".flex-active").parent().addClass("active");
},
itemMargin: 5
});
}
initGame();
});
Currently you have written the flexslider
code in $(document).ready
function 当前,您已经在
$(document).ready
函数中编写了flexslider
代码。
You have to write the following code after loading the content dynamically 动态加载内容后,您必须编写以下代码
$('.sc-stream').flexslider({
namespace: "sc-",
animation: "slide",
selector: ".cover-flow > li",
slideshow: false,
controlNav: false,
minItems: 1,
itemWidth: 224,
itemMargin: 8
});
Here's a possible solution. 这是一个可能的解决方案。
function CreateBrandsGallery() {
$.getJSON("services/products/read.php?req=brands", function(data) {
$.each(data.product_brand, function(i,data) {
var box = "<li class='add-bord-left'>";
box += "<div class='brand_carousel_box_img remove-over add-bord-radius fl_left'><a class='item_detail_box' href='products.php?req=allproducts&art="+data.brand_id+"'>";
box += "<img src='"+data.brand_preview+"' />";
box += "</a></div>";
box += "</li>"
$(box).appendTo('div.brands_gallery ul');
setTimeout(function () { ProductSBrandsGallerySlider(); }, 500);
});
});
}
And the other function: 和其他功能:
function ProductSBrandsGallerySlider() {
$('.brands_gallery,.products_new_gallery').flexslider({
animation: "slide",
animationLoop: true,
reverse: false,
slideshowSpeed: 7000,
animationSpeed: 500,
itemWidth: 233,
itemMargin: 0,
minItems: 4,
maxItems: 4,
randomize: true,
pauseOnHover: true,
initDelay: 300
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.