[英]Re-initiating bxSlider for ajax-loaded content via jscroll
我的内容跨越多个页面。 通过jscroll,我可以成功地将其他页面的内容附加到当前页面中。 我正在使用一个按钮来启动附加内容的加载。
在我的整个页面中,我使用了多个bxSlider轮播, 这些轮播无法处理附加的AJAX加载的内容,因为bxSlider显然在页面加载时被触发(并且需要按照文档所述),因此它错过了AJAX加载内容中的任何新滑块。
现在,bxSlider具有a作为reloadSlider函数,尽管在初始页面加载后似乎无法识别新添加的滑块,但它似乎仅仅是为了将新的幻灯片添加到现有的滑块中。
有没有一种方法可以触发bxSlider重新评估页面的当前内容状态,并处理单击jscroll的按钮时添加的新滑块(可能处理获取内容所造成的任何延迟)?
这里只是星座的粗略草图:
<div id="outer_wrapper">
<div id="content_wrapper">
<!-- My initial content -->
<div id="somediv">...</div>
<div id="somediv2">...</div>
<div id="somediv3" class="author_slider">My first carousel</div>
<div id="somediv4">...</div>
<div id="somediv5">...</div>
<a href="page2.php" class="loadcontent">Load more content</a>
<!-- My AJAX-loaded second page, bxSlider fails -->
<div id="somediv6">...</div>
<div id="somediv7">...</div>
<div id="somediv8" class="author_slider">My second carousel</div>
<div id="somediv9">...</div>
<div id="somediv10">...</div>
<a href="page3.php" class="loadcontent">Load more content</a>
</div>
</div>
编辑:这是我的bxSlider和jscroll的JS:
// Slider — Widget Authors
jQuery(document).ready(function(jQuery) {
jQuery('.author_slider ul').bxSlider({
minSlides: 3,
maxSlides: 5,
slideWidth: 104,
speed: 500,
pager: true,
nextSelector: '.nextLink',
prevSelector: '.prevLink'
});
});
// JScroll
jQuery(document).ready(function(jQuery) {
jQuery('#content_wrapper').jscroll({
loadingHtml: '<div class="loadcontent loading"><a>Loading …</a></div>',
nextSelector: '.loadcontent',
contentSelector: '#content_wrapper',
autoTrigger: false
});
});
加载包含新滑块的动态HTML之后,必须在这些元素上调用bxSlider
,然后才能将其作为滑块进行访问。 由于最初的$('.author_slider ul').bxSlider()
调用已在页面加载时执行(在您的动态内容之前),因此新的轮播错过了这一点,因此未初始化为bxSliders。
重新初始化相同的滑块是一种浪费,并且可能导致问题,因此您需要跟踪要初始化的滑块,因此不必重复两次。
在bxSlider()初始化上需要注意的另一件事是使用过于笼统的分页器选择器。 它们需要特定于您要初始化的滑块,否则结果将不可预测或...很差。
由于控件(寻呼机和上一页/下一页)元素不在滑块本身之外,因此您要提供选择器来指定为此目的使用哪个元素。 因此,在我们可以初始化滑块之前,我们需要识别并能够“选择”相应的控制元素。 给定您的代码,没有固有的方式可以不加选择地选择它们,因此这是第一步-找到控制元素并在其上放置一个标识符。
然后,您可以初始化新的滑块并传递这些新的选择器,它们唯一地标识所需的控制元素。
因此,例如,如果您加载此内容:
<!-- My AJAX-loaded second page, bxSlider fails -->
<div id="somediv6">...</div>
<div id="somediv7">...</div>
<div id="somediv8" class="author_slider">
My second carousel
</div>
初始化时,将以下函数传递给jScroll'callback'参数。 另外,也可以将其用于首次初始化(不要直接调用jQuery('.author_slider ul').bxSlider()
,而是在页面加载完成后调用下面的函数。
<script>
var trackSliders = [];
// use this to increment the id count...
var trackSliderCount = 0;
var initSliders = function() {
// this re-initialized ALL sliders, but that might be okay?
jQuery('.author_slider ul').each( function( index, item ) {
/* can't use the id attribute, so lets add our
own data attribute */
var obj = jQuery(item);
// make sure to use lowercase in your data attribute name
var id = obj.data('carousel-id');
if (trackSliders.indexOf( id ) == -1 )
{
var id = trackSliderCount++
// this item has NOT been initialized.
// save the id so we don't re-initialize
obj.data('carousel-id', id);
// push the id to our slider tracking array
trackSliders.push( obj.data('carousel-id') );
/* find control elements...
first step here is to get the closest containing
parent element that is identified
by the class 'author_slider'
*/
var container = jQuery(obj.closest('.author_slider'));
// now, get the child elements from the container
// that have your control elements
var prev = jQuery(container.find('.prevLink'));
var next = jQuery(container.find('.nextLink'));
var pager = jQuery(container.find('.author_pager'));
// now, we need to modify these elements so we can
// select them uniquely. If I just wanted to store
// values, I would use the jQuery().data(key, val),
// but that won't work when we use it for selection
// ( that is for a different lesson ). Instead,
// let's just assign id's to these elements and use
// ids. Append 'id' from above to make them unique
var prevId = 'bxPrev_' + id;
var nextId = 'bxNext_' + id;
var pagerId = 'bxPager_' + id;
// now, set the id attribute on each object.
prev.attr('id', prevId );
next.attr('id', nextId );
pager.attr('id', pagerId );
// now we can call bxSlider, but use our new id's
// as selectors.
obj.bxSlider({
minSlides: 3,
maxSlides: 5,
slideWidth: 104,
speed: 500,
pager: true,
nextSelector: '#' + nextId,
prevSelector: '#' + prevId,
pagerSelector: '#' + pagerId,
prevText: '<i class="car2go-icon-caret-left"></i>',
nextText: '<i class="car2go-icon-caret-right"></i>',
});
};
});
};
// jScroll
jQuery(document).ready(function(jQuery) {
// invoke the method
initSliders();
jQuery('.post_list_posts').jscroll({
loadingHtml: '<div class="link_nextposts loading"><a><i class="car2go-icon-load"></i>Loading …</a></div>',
nextSelector: '.link_nextposts a',
contentSelector: '.post_list_posts',
autoTrigger: false,
// pass in the method to the callback.
callback: initSliders
});
});
</script>
新的数据属性资料未经测试。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.