通過jscroll為ajax加載的內容重新啟動bxSlider

Question

我的內容跨越多個頁面。 通過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
    });
});

Answer 1

加載包含新滑塊的動態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>

新的數據屬性資料未經測試。